[Chartjs]-Draw a line around a single point in the linechart

by

1👍

✅

I have found a solution, hope this helps someone.

Basically we can add sample points around the single data point we have. I made a function which basically pads sample points in order to draw a line around it.

/**
 * 
 * The data points needed to draw a chart around 
 * a single point. 
 */

const padDataPoints = (data, padValue) => {
  for (let i = 0; i < padValue; i++) {
    data.push(0);
    data.unshift(0);
  }
}

This is a simple function which adds padding points on either side of the data point.

We can then make the points disappear in chart js, by making the pointRadius of all the padding points as zero.

Leave a comment