Chart trace colours

nata.loko · March 4, 2024, 10:22pm

At the moment it’s quite difficult to visualize charts with many lines as anything over 4 is blue.

pierre-gilles · March 5, 2024, 8:18am

Hey!

Indeed, we currently have 4 colors only.

Do you have any technical background to submit a PR ?

Here is the current color list:

github.com

GladysAssistant/Gladys/blob/master/front/src/components/boxs/chart/ApexChartComponent.jsx#L17


      
          
          import dayjs from 'dayjs';
          import localizedFormat from 'dayjs/plugin/localizedFormat';
          import { getApexChartBarOptions } from './ApexChartBarOptions';
          import { getApexChartAreaOptions } from './ApexChartAreaOptions';
          import { getApexChartLineOptions } from './ApexChartLineOptions';
          import { getApexChartStepLineOptions } from './ApexChartStepLineOptions';
          
          dayjs.extend(localizedFormat);
          
          const COLORS = ['#206bc4', '#FF7878', '#E0C097', '#F7D59C'];
          
          class ApexChartComponent extends Component {
            chartRef = createRef();
            addDateFormatter(options) {
              let formatter;
              if (this.props.interval <= 24 * 60) {
                formatter = value => {
                  return dayjs(value)
                    .locale(this.props.user.language)
                    .format('LLL');

If you test a new set of color, you’re welcome to change it