Draw dotted line in line chart using chartjs - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

Draw dotted line in line chart using chartjs

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){// w w w .  ja v a2  s .com
    Chart.types.Line.extend({
        name: "LineAlt",
        initialize: function () {
            Chart.types.Line.prototype.initialize.apply(this, arguments);
            var ctx = this.chart.ctx;
            var originalBezierCurveTo = ctx.bezierCurveTo;
            ctx.bezierCurveTo = function () {
                ctx.setLineDash([10, 10]);
                originalBezierCurveTo.apply(this, arguments)
            }
        }
    });
    var chartData = {
        labels: ["Jan", "Feb", "Mar", "Apr", "May"],
        datasets: [
            {
                fillColor: "rgba(255, 52, 21, 0.2)",
                pointColor: "#da4e2C",
                strokeColor: "#da4e2C",
                data: [200000, 180000, 150000, 110000, 60000]
            }
        ]
    }
    var ctx = document.getElementById("lineChart").getContext("2d");
    new Chart(ctx).LineAlt(chartData);
    }

      </script> 
   </head> 
   <body> 
      <canvas id="lineChart" width="600" height="400"></canvas>  
   </body>
</html>

Related Tutorials