CODEWITHSUNDEEP
javascriptchartschart.js
tomjcz
tomjcz

Reputation: 111

Chart.js, dashed line, full width chart

Is it possible to make dashed line on Chart.js line chart? And make the chart full width? See attached mockup.

enter image description here

This is my current code (Just simple example):

    var ctx = document.getElementById("main-line-chart").getContext("2d");
    var line = ctx.setLineDash([5, 15]);

    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",
                pointDot : false,
                fillColor: gradient,
                strokeColor: "#28AFFA",
                pointColor: "#19283F",
                pointStrokeColor: "#28AFFA",
                pointHighlightFill: "#19283F",
                pointHighlightStroke: "#28AFFA",
                data: [65, 59, 80, 81, 56, null, null]
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(0,0,0,0)",
                strokeColor: "rgba(255,255,255,.39)",
                pointColor: "#19283F",
                pointStrokeColor: "rgba(255,255,255,.39)",
                pointHighlightFill: "#19283F",
                pointHighlightStroke: "#28AFFA",
                data: [null, null, null, null, 56, 27, 90]
            }
        ]
    };

    var options = {};

    var myLineChart = new Chart(ctx).Line(data, options);
    console.log(myLineChart);

Upvotes: 5

Views: 4592

Answers (1)

uminder
uminder

Reputation: 26150

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>

Upvotes: 1

Related Questions