Chart.js to set scaleStartValue from highest to lowest - Javascript Chart.js

Javascript examples for Chart.js:Chart Data

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

Description

Chart.js to set scaleStartValue from highest to lowest

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://code.jquery.com/jquery-2.1.0.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//w  w  w  . j  a va  2s  .c om
    var ctx = $("#perf-chart").get(0).getContext("2d"),
        ctx2 = $("#inverted-chart").get(0).getContext("2d")
    var data = {
        labels: ["May", "Jun", "July", "Aug", "Sept", "Oct", "Nov","Dec"],
        datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [8, 8, 9, 7, 7, 7, 5,4]
        }
    ]
    };
    var myNewChart = new Chart(ctx).Line(data, {
        scaleShowGridLines: true,
        scaleOverride: true,
        scaleStartValue: 0,
        scaleStepWidth: 1,
        scaleSteps: 10,
        responsive:true});
var inverted = [].slice.call(data.datasets[0].data),
    max = Math.max.apply(Math, inverted);
inverted.forEach(function(val, idx) {
    inverted[idx] = max - val;
});
    var data2 = {
        labels: ["May", "Jun", "July", "Aug", "Sept", "Oct", "Nov","Dec"],
        datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: inverted
        }
    ]
    };
    var myNewChart2 = new Chart(ctx2).Line(data2, {
        scaleShowGridLines: true,
        scaleOverride: true,
        scaleStartValue: 0,
        scaleStepWidth: 1,
        scaleSteps: 10,
        responsive:true});
    });

      </script> 
   </head> 
   <body> 
      <canvas id="perf-chart" height="200"></canvas> 
      <canvas id="inverted-chart" height="200"></canvas>  
   </body>
</html>

Related Tutorials