Chartjs-How to plot an equation using ChartJS?

by

1👍

In order to do this with chart.js you will need to use the alternate data format for line charts where you define an x and y value for each point. You also need to configure both the x and y axis (scales) to be linear scales. Lastly, you will probably need to define more points along the bottom part of the curve (the 2nd equation) to ensure the heart shape looks good.

Here is an example configuration that applies all the things I mentioned above. I also want to mention that I played with the axis min/max values to get a good looking heart.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  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,
        }
      }]
    }
  }
});

You can see this in action in this codepen example.

Leave a comment