1

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,
});

It outputs this chart. chart.js chart

react-chartjs-2 is built on top of chart.js. Is it possible to make the same chart? How?

GollyJer
  • 23,857
  • 16
  • 106
  • 174

0 Answers0