[Chartjs]-Chart.js, dashed line, full width chart

by

1👍

Chart.js has evolved since this question was posted but even with the current version 2.9.4, the solution looks almost the same as the originally posted code.

The main changes are the following:

  • Instead of using new Chart(ctx).Line(...), we should now use type: 'line' as shown here.
  • Quite some dataset properties have different names.
  • Use the option borderDash to draw the dashed line of the second dataset.

Please take a look at your amended code and see how it works.

var ctx = document.getElementById("main-line-chart").getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, 'rgba(40,175,250,.25)');
gradient.addColorStop(1, 'rgba(40,175,250,0)');

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
      label: "My First dataset",
      backgroundColor: gradient,
      borderColor: "#28AFFA",
      pointColor: "#19283F",
      pointHighlightColor: "#28AFFA",
      data: [65, 59, 80, 81, 56, null, null]
    },
    {
      label: "My Second dataset",
      fill: false,
      borderColor: "rgba(100, 100, 100,.39)",
      pointColor: "#19283F",
      pointHighlightColor: "#28AFFA",
      data: [null, null, null, null, 56, 27, 90],
      borderDash: [10, 5]
    }
  ]
};

var options = {};
var myLineChart = new Chart(ctx, {
  type: "line",
  data: data,
  options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="main-line-chart" height="100"></canvas>

Leave a comment