[Chartjs]-Chart.js 2.0 – How to change default appearance of canvas/chart elements

by

12👍

✅

1.Remove the grid line up the y-axis

Just set display to false for options.scales.yAxes. This will remove all the labels too – we’ll call the library method to draw the labels (without drawing the y-axis) in the plugin (see Step 4)

2.Remove the points on the first and last items of the dataset that meet the left/right edge of the chart

Just pass in an array to pointRadius and pointHoverRadius instead of a number. The following arrays will hide the first and last points (with your data)

...
pointRadius: [0, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 0],
pointHoverRadius: [0, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 0],
...

You might have to generate this using a script if your data length is dynamic.

3.Inset the y-axis scale labels

Set ticks.mirror for options.scales.yAxes to true. The plugin (from Step 4) will then just call the library draw method for the scale.

4.Make x-axis grid lines overlay on top of the line data fill

To make the gridLines appear (like it is) over the fill but under the points, the easiest way would be to draw it under the fill and set the fill to a slightly transparent value. 

backgroundColor: "rgba(247,155,45,0.4)",

We have to draw the gridLines on our own since we don’t want them to start from the edge. So set gridLines.display to false for options.scales.yAxes and register the following plugin

Chart.pluginService.register({
    afterDraw: function (chart, easingDecimal) {
        var yScale = chart.scales['y-axis-0'];
        var helpers = Chart.helpers;
        var chartArea = chart.chartArea;

        // draw labels - all we do is turn on display and call scale.draw
        yScale.options.display = true;
        yScale.draw.apply(yScale, [chartArea]);
        yScale.options.display = false;

        yScale.ctx.save();
            // draw under the fill
        yScale.ctx.globalCompositeOperation = 'destination-over';
        // draw the grid lines - simplified version of library code
        helpers.each(yScale.ticks, function (label, index) {
            if (label === undefined || label === null) {
                return;
            }

            var yLineValue = this.getPixelForTick(index);
            yLineValue += helpers.aliasPixel(this.ctx.lineWidth);

            this.ctx.lineWidth = this.options.gridLines.lineWidth;
            this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';

            this.ctx.beginPath();
            this.ctx.moveTo(chartArea.left + 40, yLineValue);
            this.ctx.lineTo(chartArea.right, yLineValue);
            this.ctx.stroke();

        }, yScale);
        yScale.ctx.restore();
    },
})

Plugins will be called for all charts. If you want to skip the above logic for some charts, all you have to is set some property on the options object and check for it before you run your logic (e.g. yAxis.options.custom at the same level as yAxis.options.display

If you want to hide the 0 and 500 labels, you can set ticks.callback for options.scales.yAxes, like so

callback: function(value) {
  if (value !== 0 && value !== 500)
    return '' + value;
},

Note that it works as long as your scale is within the suggestedMin and suggestedMax. If your data goes outside these bounds, you’ll have to use the scale properties.

To make the x-axis label background white, just add the below bit to the end of the plugin’s afterDraw method

yScale.ctx.save();
yScale.ctx.fillStyle = 'white';
yScale.ctx.globalCompositeOperation = 'destination-over';
yScale.ctx.fillRect(0, yScale.bottom, chartArea.right, chartArea.bottom);
yScale.ctx.restore();

It just draws a white rectangle under the canvas content. Because your background color is set via the CSS, the rectangle is on top of the background color and everything is shiny.

You also have to move your background-color from your .chartjs-wrap to your canvas (otherwise you get a orange border at the bottom)

canvas {
    background-color: rgba(250, 210, 162, 1.0);
    ...

Updated version of your JSBin will all the above applied – http://jsbin.com/parucayara/1/edit?output

Leave a comment