score:4

Accepted answer

you can adapt the other answer to show the background only for the bars - note that in this case you'll need the bars collection

chart.types.bar.extend({
    name: "baralt",
    initialize: function (data) {
        var self = this;
        var originalbuildscale = self.buildscale;
        self.buildscale = function () {
            originalbuildscale.apply(this, arguments);

            var ctx = self.chart.ctx;
            var scale = self.scale;
            var originalscaledraw = self.scale.draw;
            var barareawidth = scale.calculatex(1) - scale.calculatex(0);
            var barareaheight = scale.endpoint - scale.startpoint;

            self.scale.draw = function () {
                originalscaledraw.call(this, arguments);
                ctx.fillstyle = data.barbackground;
                self.datasets.foreach(function (dataset) {
                    dataset.bars.foreach(function (bar) {
                        ctx.fillrect(
                            bar.x - bar.width / 2,
                            scale.startpoint,
                            bar.width,
                            barareaheight);
                    })
                })
                ctx.fill();
            }
        }

        chart.types.bar.prototype.initialize.apply(this, arguments);
    }
});

with the chart data like so

var data = {
    barbackground: "rgba(221, 224, 229, 1)",
    ...

and the call like so (as before)

var ctx = document.getelementbyid("chart").getcontext("2d");
var mybarchart = new chart(ctx).baralt(data, {
    barvaluespacing: 15,
});

fiddle - http://jsfiddle.net/ayy2vxsj/


enter image description here

score:0

you could extend the bar chart and override the scale draw event to shade the background, like so

chart.types.bar.extend({
    name: "baralt",
    initialize: function (data) {
        var self = this;
        var originalbuildscale = self.buildscale;
        self.buildscale = function () {
            originalbuildscale.apply(this, arguments);

            var ctx = self.chart.ctx;
            var scale = self.scale;
            var originalscaledraw = self.scale.draw;
            var barareawidth = scale.calculatex(1) - scale.calculatex(0);
            var barareaheight = scale.endpoint - scale.startpoint;
            self.scale.draw = function () {
                originalscaledraw.call(this, arguments);
                scale.xlabels.foreach(function (xlabel, i) {
                    ctx.fillstyle = data.labelbackgrounds[i];
                    ctx.fillrect(
                        scale.calculatex(i - (scale.offsetgridlines ? 0.5 : 0)),
                        scale.startpoint,
                        barareawidth,
                        barareaheight);
                    ctx.fill();
                })
            }
        }

        chart.types.bar.prototype.initialize.apply(this, arguments);
    }
});

with the chart data like so

var data = {
    labelbackgrounds: ["rgba(120,220,220,0.2)", "rgba(220,120,220,0.2)", "rgba(220,220,120,0.2)", "rgba(120,120,220,0.2)", "rgba(120,220,120,0.2)", "rgba(220,120,120,0.2)", "rgba(120,120,120,0.2)"],
    labels: ...

note - if you just want to color the bars, i believe there was already a question on so for the same.


fiddle - http://jsfiddle.net/x73rhq2y/


enter image description here


Related Query

More Query from same tag