Default Colors

Simple question – I have data from backend, why the hell on earth I must specify the colors for the charts?

Can there be some default colors if you don’t provide color & highlight color ?

Author: Fantashit

17 thoughts on “Default Colors

  1. I don’t believe merging #711 has fixed this; doesn’t it only generate colors for a doughnut chart? I’d love not to manually specify colors for line chart as well (and probably others, too).

  2. I’m not sure why this issue was closed as I ran into this problem today. I found the top 20 default google charts colors pretty helpful.

    var default_colors = ['#3366CC','#DC3912','#FF9900','#109618','#990099','#3B3EAC','#0099C6','#DD4477','#66AA00','#B82E2E','#316395','#994499','#22AA99','#AAAA11','#6633CC','#E67300','#8B0707','#329262','#5574A6','#3B3EAC']

  3. I’ve been manually mapping color data on to raw data records:

        const colors = {
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1,
        };
    
        const data = {
            ...serverData,
            datasets: mapValues(serverData.datasets, dataset => ({ ...dataset, ...colors }))
        };
    

    Where “serverData” looks like:

        "data": {
            "labels": ["Cows", "Sheep", "Pigs"],
            "datasets": [
                {
                    "data": [55, 40, 30]
                }
            ]
        }
    

    Then pass “data” in to the chart. It’s not perfect, but at least my input data doesn’t need to be filled with color/display data.

  4. It is easy:

              var config = {
                        type: 'pie',
                        data: {
                            datasets:[{
                                data: ##,
                                backgroundColor: poolColors(total),
                                label: ##
                            }],
                            labels: data.labels
                        },
                        options: {
                            responsive: true
                        }
                    };
    
        var poolColors = function (a) {
            var pool = [];
            for(i=0;i<a;i++){
                pool.push(dynamicColors());
            }
            return pool;
        }
    
        var dynamicColors = function() {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            return "rgb(" + r + "," + g + "," + b + ")";
        }
    
  5. All the ideas of random color generator are bad, for your users it will generate random colors every time – pretty bad idea on ui consistency.

  6. I think the majority of the solutions in here, bar a few, are about setting default colors based on a nice predetermined collection of colors. Rather than truely being random, and I agree, true random would be madness – “lime on yellow anyone?” 🍋

  7. @etimberg isn’t there a way to define the chart color globally? Ie. like I’m already doing with my fonts:

    // Chart.defaults.global.backgroundColor: "#000";
    Chart.defaults.global.defaultFontFamily = "'Comic Sans MS'";
    Chart.defaults.global.defaultFontSize = 11;
    

    cc @vladshcherbin

  8. 2017-10-15 4 08 54

    2017-10-15 4 07 58

    As @alex-martinez noted @etimberg ‘s mention in #1618,
    here is a dirty snippet using global plugin technique:

    import Color from 'color';
    import palette from 'json-loader!open-color/open-color.json';
    
    const colors = [
      palette['red'],
      palette['blue'],
      palette['yellow'],
      palette['green'],
      palette['pink'],
      palette['cyan'],
      palette['orange'],
      palette['lime'],
      palette['grape'],
      palette['indigo'],
      palette['teal'],
      palette['violet'],
    ];
    
    function pickColor(idx: number) {
      return colors[idx %% colors.length][4 - Math.floor(idx / colors.length)];
    }
    
    Chart.pluginService.register({
      beforeUpdate(chart) {
        switch (chart.config.type) {
          case 'bar': {
            let idx = 0;
            for (const dataset of chart.data.datasets) {
              if (!dataset.borderColor) {
                const borderColor = [];
                for (const _d of dataset.data) {
                  borderColor.push(pickColor(idx++));
                }
                dataset.borderColor = borderColor;
    
                if (!dataset.backgroundColor) {
                  dataset.backgroundColor = borderColor.map(hex => {
                    const color = new Color(hex).alpha(0.5);
                    return color.string();
                  });
                }
              }
            }
            break;
          }
          case 'line': {
            let idx = 0;
            for (const dataset of chart.data.datasets) {
              if (!dataset.borderColor) {
                dataset.borderColor = pickColor(idx++);
                if (!dataset.backgroundColor) {
                  dataset.backgroundColor = dataset.borderColor;
                }
              }
            }
            break;
          }
        }
      },
    });

    I am new to Chart.js and the code might have some flaws 🙂

  9. @ficus you can pass any of the following to any colour option in v2.9.4

    • hex string (3 or 6 characters)
    • 'rgb(##, ##, ##)' string
    • 'rgba(##, ##, ##, ##)' string
    • 'hsl(## ,##, ##)' string
    • 'hsla(##, ##, ##, ##)' string
    • CanvasPattern
    • CanvasImage
    • A CSS named color though I believe this only supports CSS level 1/2/3 colors and nothing from CSS Color level 4.

    In terms of documentation there is a page on colours at https://www.chartjs.org/docs/latest/general/colors.html

    Certain chart types may support arrays of colours or functions that return a color for each item. For example, in the bar chart the backgroundColor property can be either an array or a function. This is denoted by 'yes' in the ‘scriptable’ and ‘indexable’ columns of the doc page.

Comments are closed.