Plot an equation using ChartJS - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Plot an equation using ChartJS

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js - Plotting a Heart Shape</title> 
   </head> 
   <body translate="no"> 
      <div id="canvas-holder" style="width:40%"> 
         <canvas id="myChart"></canvas> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script>
      var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {//w  ww  .  ja va  2s .  com
  type: 'line',
  data: {
    datasets: [{
      label: 'Equation Plotted',
      data: [{
        x: 0,
        y: 2
      }, {
        x: 1,
        y: 3
      }, {
        x: 2,
        y: 2
      }, {
        x: 1.02,
        y: 0.4
      }, {
        x: 0,
        y: -1
      }],
      backgroundColor: [
        'rgba(123, 83, 252, 0.8)',
        'rgba(123, 83, 252, 0.8)',
        'rgba(123, 83, 252, 0.8)',
        'rgba(123, 83, 252, 0.8)',
        'rgba(123, 83, 252, 0.8)',
        'rgba(123, 83, 252, 0.8)'
      ],
      borderColor: [
        'rgba(33, 232, 234, 1)',
        'rgba(33, 232, 234, 1)',
        'rgba(33, 232, 234, 1)',
        'rgba(33, 232, 234, 1)',
        'rgba(33, 232, 234, 1)',
        'rgba(33, 232, 234, 1)'
      ],
      borderWidth: 1
    }],
  },
  options: {
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom',
        ticks: {
          min: -1,
          max: 8,
          stepSize: 1,
          fixedStepSize: 1,
        }
      }],
      yAxes: [{
        ticks: {
          min: -2,
          max: 4,
          stepSize: 1,
          fixedStepSize: 1,
        }
      }]
    }
  }
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials