Chartjs-Connecting Two Datasets in Chart.js Into a Single Line

by

0👍

Managed to solve the problem, posting to help anyone with a similar problem.

I ended up creating a chart.js plugin that draws a line finds the X and Y coordinates of the last historical point and then draws a line between that and the X and Y coordinate of the first prediction point. After beating my head against it for a while I can’t believe it was so simple.

I’m posting the code down below – this is a react application so it may not fit cleanly into every use case. The JSFiddle isn’t setup to work, but you can see how to grab the point data which was the hardest part for me!

//Grab the chart meta data and identify the x and y coordinates of the 
appropriate points
    var meta = chartInstance.getDatasetMeta(0);
    var predictionMeta = chartInstance.getDatasetMeta(1);
    var chartFirstPointX = meta.data[this.props.actualData.length - 1]._model.x;
    var lastActualY = meta.data[this.props.actualData.length - 1]._model.y;
    
    var predictionFirstPointX = predictionMeta.data[0]._model.x;
    var predictionFirstPointY = predictionMeta.data[0]._model.y;



    Chart.pluginService.register({
      id: 'forecastLine',
      beforeDraw: function(chartInstance) {
        var ctx = chartInstance.chart.ctx,
            yTop = chartInstance.chartArea.top,
            yBottom = chartInstance.chartArea.bottom,
            firstPredictionX = predictionFirstPointX,
            firstPredictionY = chartInstance.config.data.datasets[1].data[0].y;

        ctx.fillStyle = '#FAFAFA';
        ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
//draw a vertical line separating the two datasets, then draw a line 
connecting them
       ctx.save();
       ctx.beginPath();
       ctx.moveTo(chartFirstPointX, yBottom);
       ctx.lineTo(chartFirstPointX, yTop);
       ctx.moveTo(chartFirstPointX, lastActualY);
       ctx.lineTo(predictionFirstPointX, predictionFirstPointY);
       ctx.lineWidth = 2;
       ctx.strokeStyle = '#68D1FE';
       ctx.stroke();
       ctx.restore();

Leave a comment