How to plot an equation using ChartJS?

Question

I'm trying to plot a heart like shape using ChartJS for a Calculus project. I'm not too sure if ChartJS can even plot equations, but I'm hopeful someone has done it somewhere. I have these two equations y=(1-(x-1)^2)^(1/2)+2, and y=-3(1-x^(1/2)•2^(-1/2))^(1/2)+2, and when you graph those two equations, they make half a heart shape (did on a Ti-84). I would like to plot those equations using ChartJS, but I'm unsure how to do so. I tried plotting using the data values, for whatever x= whatever y, but it requries me to curve the bottom of the graph back around, but chartjs wont cooperate. I've attached an image with how the graph is supposed to look (used GeoGebra), if anyone can help out, let me know. Plotted equations geogebra

Also here's my code, if anyone can figure out how to make the graph curve at the bottom like the image using only the data plots, please share :D

<script>
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["0", "1", "2", "3", "4", "5", "6"],
                    datasets: [{
                        label: 'Equation Plotted',
                        data: [2, 3, 2, 0],
                        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: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
    </script>

Answer 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.