Chartjs-ChartJS with React: Only one value showing on time chart

by

0👍

This could be fixed by changing your line chart into a scatter chart.

const chartInstance = new Chartjs(chartRef.current,{
  type: 'scatter',
  ...

To still get the lines drawn between the data points, you need to define the option showLine: true on the dataset.

datasets: [{
  label: "Price",
  showLine: true,
  ...
}]

UPDATE

You should also make sure to update the chart when new data is added and the chart already exists. Not knowing much about react.js, you could make chartInstance a global variable and proceed as follows:

if (chartRef && chartRef.current) {
   chartInstance = new Chartjs(chartRef.current,{
     type: 'line',
     ...
} else {
   chartInstance.update();
}

Leave a comment