Extend bar chart on Chart JS 2 into a new type of Chart

Question

I\'m actualy using Chart JS 2.0.1 to draw charts on a page.

My customers asked me to add a line in a bar chart so that they can see the limit they can\'t go over. Like

Answer 1

Mixed type charts are supported by Chart 2.x versions. You can create config like following :-

var config = {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      type: 'bar',
      label: "My First dataset",
      data: [65, 0, 80, 81, 56, 85, 40],
      fill: false
    },{
        type: 'line',
      label: "My Second dataset",
      data: [80, 80, 80, 80, 80, 80, 80],
      fill: false,
      borderColor: 'red',
      pointStyle: 'line',
      pointBorderWidth: 3
    }]    
  }
};

Created Js Fiddle here: https://jsfiddle.net/nehadeshpande/eu70wzo4/

Please let me know if this is helpful.

Thanks, Neha

Answer 2

This is helpful but I found it not that optimized to add new Dataset just for a line that is actually not a data.

I finally suceeded in creating the new type that extend the bar type and add a line if the value is provided.

// Store the original Draw function
var originalLineDraw = Chart.controllers.bar.prototype.draw;
// extend the new type
Chart.helpers.extend(Chart.controllers.bar.prototype, {
    draw: function () {
    // use the base draw function
    originalLineDraw.apply(this, arguments);

    // get chart and context
    var chart = this.chart;
    var ctx = chart.chart.ctx;

    // get lineAtValue value
    var value = chart.config.lineAtValue;

    // stop if it doesn't exist
    if (typeof value === "undefined") {
        return;
    }

    // draw the line
    var xaxis = chart.scales['x-axis-0'];
    var yaxis = chart.scales['y-axis-0'];
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(xaxis.left, yaxis.getPixelForValue(value));
    ctx.strokeStyle = '#ff0000';
    ctx.lineTo(xaxis.right, yaxis.getPixelForValue(value));
    ctx.stroke();
    ctx.restore();

    }
});

But thank you for your help =)

Answer 3

If this helps, I rewrite @Ptournem answer to be a valid 2.3.0 plugin with some sort of configutation

Chart.plugins.register({
    config: {
        /** @type {rbg|rgba|hex}  Stroke color */
        strokeColor: "rgb(255, 0, 0)",

        /** @type {int}  Column width */
        lineWidth: 1,
    },

    afterDatasetsDraw: function(chartInstance, easing) {
        var value = chartInstance.config.lineAtValue;

        if (typeof value === 'undefined') return;

        var ctx   = chartInstance.chart.ctx,
            xaxis = chartInstance.scales['x-axis-0'],
            yaxis = chartInstance.scales['y-axis-0'];

        ctx.save();
        ctx.beginPath();
        ctx.moveTo(xaxis.left, yaxis.getPixelForValue(value));
        ctx.lineWidth   = this.config.lineWidth;
        ctx.strokeStyle = this.config.strokeColor;
        ctx.lineTo(xaxis.right, yaxis.getPixelForValue(value));
        ctx.stroke();
        ctx.restore();
    },

    // IPlugin interface
    afterDatasetsUpdate: function(chartInstance) {},
    afterDraw: function(chartInstance, easing) {},
    afterEvent: function(chartInstance, event) {},
    afterInit: function(chartInstance) {},
    afterScaleUpdate: function(chartInstance) {},
    afterUpdate: function(chartInstance) {},
    beforeRender: function(chartInstance) {},
    beforeDatasetsDraw: function(chartInstance, easing) {},
    beforeDatasetsUpdate: function(chartInstance) {},
    beforeDraw: function(chartInstance, easing) {},
    beforeEvent: function(chartInstance, event) {},
    beforeInit: function(chartInstance) {},
    beforeUpdate: function(chartInstance) {},
    destroy: function(chartInstance) {},
    resize: function(chartInstance, newChartSize) {},
});