Enable Stepped lines in Chart.Js - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

Enable Stepped lines in Chart.Js

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>ChartJS - stepped line chart</title> 
   </head> 
   <body translate="no"> 
      <div class="container"></div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script>
window.chartColors = {/*from  www .  j  a va  2 s  .  c  o m*/
   red: 'rgb(255, 99, 132)',
   orange: 'rgb(255, 159, 64)',
   yellow: 'rgb(255, 205, 86)',
   green: 'rgb(75, 192, 192)',
   blue: 'rgb(54, 162, 235)',
   purple: 'rgb(153, 102, 255)',
   grey: 'rgb(201, 203, 207)'
};
window.randomScalingFactor = function() {
   return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
function createConfig(details, data) {
      return {
         type: 'line',
         data: {
            labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
            datasets: [{
               label: 'steppedLine: ' + ((typeof(details.steppedLine) === 'boolean') ? details.steppedLine : `'${details.steppedLine}'`),
               steppedLine: details.steppedLine,
               data: data,
               borderColor: details.color,
               fill: false,
            }]
         },
         options: {
            responsive: true,
            title: {
               display: true,
               text: details.label,
            }
         }
      };
   }
   window.onload = function() {
      var container = document.querySelector('.container');
      var data = [
         randomScalingFactor(),
         randomScalingFactor(),
         randomScalingFactor(),
         randomScalingFactor(),
         randomScalingFactor(),
         randomScalingFactor()
      ];
      var steppedLineSettings = [{
         steppedLine: true,
         label: 'No Step Interpolation',
         color: window.chartColors.red
      }, {
         steppedLine: true,
         label: 'Step Before Interpolation',
         color: window.chartColors.green
      }, {
         steppedLine: 'before',
         label: 'Step Before Interpolation',
         color: window.chartColors.green
      }, {
         steppedLine: 'after',
         label: 'Step After Interpolation',
         color: window.chartColors.purple
      }];
      steppedLineSettings.forEach(function(details) {
         var div = document.createElement('div');
         div.classList.add('chart-container');
         var canvas = document.createElement('canvas');
         div.appendChild(canvas);
         container.appendChild(div);
         var ctx = canvas.getContext('2d');
         var config = createConfig(details, data);
         new Chart(ctx, config);
      });
};
      </script>  
   </body>
</html>

Related Tutorials