[Chartjs]-Chartjs Datasets overlapping and z-index

by

17👍

✅

The option dataset.order has similar effect as the z-index.

  • Datasets with higher order are drawn first
  • Datasets with no or lower order are drawn last, hence appear on top

Therefore, adding order: 1 to your line datasets should solve the problem.

var newDataLine = {
  ...
  order: 1
};

1👍

Instead of defining multiple datasets, you could proceed as follows:

  • First convert your line chart into a scatter chart.
  • Then draw the lines directly on the canvas using the Plugin Core API. The API offers a range of hooks that may be used for performing custom code. You can use the beforeDraw hook to draw connection lines of different colors between data points and to the open end of the chart.

Note that you have to define xAxes.ticks.max in order to obtain the open end line at the right of the chart.

Please take a look at below runnable code snippet and see how it works.

new Chart('line-chart', {
  type: "scatter",
  plugins: [{
    beforeDraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      var xAxis = chart.scales['x-axis-1'];
      var yAxis = chart.scales['y-axis-1'];
      var dataset = chart.data.datasets[0];
      var y = yAxis.getPixelForValue(0);
      dataset.data.forEach((value, index) => {
        var xFrom = xAxis.getPixelForValue(value.x);
        var xTo;
        if (index + 1 < dataset.data.size) {
          xTo = xAxis.getPixelForValue(dataset.data[index + 1].x);
        } else {
          xTo = xAxis.right;
        }        
        ctx.strokeStyle = dataset.backgroundColor[index];
        ctx.lineWidth = 4;
        ctx.beginPath();
        ctx.moveTo(xFrom, y);
        ctx.lineTo(xTo, y);
        ctx.stroke();        
      });
      ctx.restore();
    }
  }],
  data: {
    datasets: [{
      data: [
        { x: 0, y: 0 },
        { x: 1, y: 0 },
        { x: 2, y: 0 }
      ],
      backgroundColor: ['red', 'blue', 'green'],
      borderColor: ['red', 'blue', 'green'],
      pointRadius: 8,
      pointHoverRadius: 8,
    }],
  },
  options: {
    layout: {
      padding: {
        left: 10,
        right: 10
      }
    },
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
      yAxes: [{
        ticks: {
          display: false
        },
        gridLines: {
          display: false,
        }
      }],
      xAxes: [{
        ticks: {
          display: false,
          max: 3
        },
        gridLines: {
          display: false
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="line-chart" height="30"></canvas>

Leave a comment