The doc gives a little example about bar chart:

var data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            data : [28,48,40,19,96,27,100]
        }
    ]
}

and then to create the chart using new Chart(ctx).Bar(data);

Is it possible to define the view separately from the data i.e. define fillColor and strokeColor somewhere else leaving only data in datasets objects? Assume I want only one set in datasets.

I want to generate the data (labels and values) in back-end, and leave the view details to the front-end.

The official options don't expect this.

Doc:

The doc gives a little example about bar chart:

var data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            data : [28,48,40,19,96,27,100]
        }
    ]
}

and then to create the chart using new Chart(ctx).Bar(data);

Is it possible to define the view separately from the data i.e. define fillColor and strokeColor somewhere else leaving only data in datasets objects? Assume I want only one set in datasets.

I want to generate the data (labels and values) in back-end, and leave the view details to the front-end.

The official options don't expect this.

Doc: http://www.chartjs/docs/#barChart

• javascript
• html
• canvas
• charts

2 Answers 2

You are correct in that chartjs does not support those properties as global options.

Fortunately, a quick fix would require you to only change source lines including...

data.datasets[i].fillColor

...to, for instance:

config.fillColor || data.datasets[i].fillColor

...resulting in something similar to:

ctx.fillStyle = config.fillColor || data.datasets[i].fillColor;

The same applies to strokeColor.

Then you can either add a fillColor property to the global config or include it in datasets.

You can pute options based on ChartJS' options on the server as well, if needbe and pass that as a parameter to

new Chart(ctx).Bar(data,options);

like

new Chart(ctx).Bar(data,{fillColor : "rgba(151,187,205,0.5)", strokeColor :"rgba(151,187,205,1)",});

because ChartJS does a merge of options in

function mergeChartConfig(defaults,userDefined){
    var returnObj = {};
    for (var attrname in defaults) { returnObj[attrname] = defaults[attrname]; }
    for (var attrname in userDefined) { returnObj[attrname] = userDefined[attrname]; }
    return returnObj;
}

You can edit that to give you the effect you want! https://github./nnnick/Chart.js/blob/master/Chart.js