I have this code in chart.js
.
const data = {
datasets: [
{
label: 'Dataset #1',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 2,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: [
{
x: 0,
y: 5,
},
{
x: 1,
y: 10,
},
{
x: 1,
y: 5,
},
{
x: 2,
y: 10,
},
],
},
],
};
const option = {
scales: {
yAxes: [
{
stacked: true,
gridLines: {
display: true,
color: 'rgba(255,99,132,0.2)',
},
},
],
xAxes: [
{
gridLines: {
display: true,
color: 'rgba(255,99,132,0.2)',
},
},
],
},
elements: {
line: {
tension: 0.1, // bezier curves
},
},
};
Chart.Scatter('chart_0', {
options: option,
data,
});
react-chartjs-2
is built on top of chart.js
.
Is it possible to make the same chart? How?