score: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.
Source: stackoverflow.com
Related Query
- How to plot an equation using ChartJS?
- How to run Chart.js samples using source code
- how to plot multiple time series in chartjs where each time series has different times
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- How to work out Chartjs using TypeScript with Chartjs.definitelyTyped from github
- how to reset the graph/chart after zoomin, pan using chartjs
- How to add ChartJS code in Html2Pdf to view image
- How to create a stacked graph using ChartJS
- How to create a rounded rectangle using ChartJS
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- ChartJS / Chartjs-plugin-annotation How to draw multiple vertical lines using an array?
- How to update a react-chartjs-2 plot using useState()
- how to put a y-axis and x-axis label while using html and chartjs
- how can i send a list of numbers from views.py to a chartjs file im using for the front?
- How to display chart using Chartjs with JSON data in Laravel
- How to generate chartjs charts to pdf using laravel?
- How to update a chart using VueJS and ChartJS
- How to generate color code dynamically by swapping 2 characters within a string using PHP
- How to highlight single bar in bar chart using Chartjs
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- How to plot Firebase data with Chartjs in angular
- How to get the database data into ChartJS using codeigniter
- how to increase space between legend and chart in chartjs (ng2charts ) using angular
- How to get Data from API to display chart using chartjs in Vuejs
- How to draw a range label on x axis using chartJS
- How to take a set of Date objects and display the frequency based on time of day using ChartJS
- How to get the data attribute of the canvas chart created using chartjs
- how can plot graph using json data
- How to hide/show bars differentiate by a colors and by click on labels, using chartjs bar charts?
- How to add additional label in the middle of each bar using ChartJS
More Query from same tag
- How can I create custom tooltips for each data point in a graph?
- Chart Data Not Updating for Both Graphs?
- How to dynamically link json data to chart.js
- In react hooks, how can i pass the filtered values to the chart?
- Chart.js display x axis labels ON ticks in bar chart, not between
- How to zoom Y axis on time series or X-Y chartjs graph
- Chart.js add to onhover text
- Chart.js not rendering unless i set a timeout
- Scatterplot with 4 labels (Opposite Diagram) in any js library?
- Can't size doughnut chart from chart.js
- Javascript function to check for missing dates on JSON object
- how to display datetime list in graph using chart.js
- Remove the vertical line in the chart js line chart
- Chart JS custom tooltip option?
- Angular-chart.js Configuration
- Chartjs v2.0: stacked bar chart
- ChartJS doesn't draw the chart
- Chart.js - is there a way to extend an existing scale?
- How to change chart.js axis labels color?
- Why is my Line Chart.JS starting in the middle?
- Trying to insert another label for a piechart in ChartsJS
- not able to move my range slector
- ChartJS custom bar chart
- Loop through each tooltips to add different TimeStamps
- Automatically update ChartJS with Knockout data-bind
- Chart section is empty
- how to add color to each data in chartjs scatter plot
- How to change the Y-axis value in chartjs
- How to add an array to my line data?
- chart js stripline? like one from canvas