Default Colors

[vladshcherbin]

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 ?

[thehonestcto]

I subscribe to this issue. Charts should be able to pick random colors by themselves, unless the user specifies his own colors. Currently we have to specify colors for each set of data, which is very hard when a variable number of data sets is displayed.
I would really love & need this feature.
By the way, thanks for the great work.

[jtblin]

If you use angular, you should try angular-chart.js, it does exactly that,
among other things.
On 12/12/2014 7:04 PM, "Mircea" notifications@github.com wrote:

I subscribe to this issue. Charts should be able to pick random colors by
themselves, unless the user specifies his own colors. Currently we have to
specify colors for each set of data, which is very hard when a variable
number of data sets is displayed.
I would really love & need this feature.
By the way, thanks for the great work.

—
Reply to this email directly or view it on GitHub
#815 (comment).

[saintedlama]

Beside that I consider it bad style to use "why the hell on earth" when asking a humble question, you could have a look at d3 to get some color arrrays to choose from: https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors

[vladshcherbin]

@saintedlama yeah, although the chart.js looks cool, I had to move to another library. The author does not respond to users, 300+ issues, 99+ pr, this project is pretty much dead. But, it still looks nice.

[etimberg]

@vladshcherbin #795 has a link to a more active version. I'm not sure how compatible it is.

[fulldecent]

Sorry for the slow reply.

This project has new life breathing in. I am prioritizing this issue.

[dany28]

maybe this helps, i've written like this:

fix core Chart.Type function:

    Chart.Type = function(data,options,chart){
        this.options = options;
        this.chart = chart;
        this.id = uid();
        //Add the chart instance to the global namespace
        Chart.instances[this.id] = this;
        //fix colors
        if (Chart.defaults.global.colours) {
            helpers.each(data.datasets, function (dataset, index) {
                if ((dataset.fillColor === undefined) && (dataset.strokeColor === undefined)) {
                    helpers.extend(dataset, Chart.defaults.global.colours[index % Chart.defaults.global.colours.length]);
                }
            });
        }
        // Initialize is always called when a chart type is created
        // By default it is a no op, but it should be extended
        if (options.responsive){
            this.resize();
        }
        this.initialize.call(this,data);
    };

and define colors based on angular

Chart.defaults.global.colours = [
    { // blue
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,0.8)"
    },
    { // light grey
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,0.8)"
    },
    { // red
        fillColor: "rgba(247,70,74,0.2)",
        strokeColor: "rgba(247,70,74,1)",
        pointColor: "rgba(247,70,74,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(247,70,74,0.8)"
    },
    { // green
        fillColor: "rgba(70,191,189,0.2)",
        strokeColor: "rgba(70,191,189,1)",
        pointColor: "rgba(70,191,189,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(70,191,189,0.8)"
    },
    { // yellow
        fillColor: "rgba(253,180,92,0.2)",
        strokeColor: "rgba(253,180,92,1)",
        pointColor: "rgba(253,180,92,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(253,180,92,0.8)"
    },
    { // grey
        fillColor: "rgba(148,159,177,0.2)",
        strokeColor: "rgba(148,159,177,1)",
        pointColor: "rgba(148,159,177,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(148,159,177,0.8)"
    },
    { // dark grey
        fillColor: "rgba(77,83,96,0.2)",
        strokeColor: "rgba(77,83,96,1)",
        pointColor: "rgba(77,83,96,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(77,83,96,1)"
    }
];

[pitgrap]

Please take a look at #711
I prefer calculated colors instead of a long list of predefined colors.

[jakesylvestre]

As per #711 I'm going to close this for now, as it would seem #711 is going to be merged soon