Draw a line around a single point in the linechart

Question

I am creating a linechart, with months on the x axis and values on the y axis. The issue is that when there is a single data point, there is no line drawn around it. I was able to draw a horizontal line using the annotations plugin but when the value is > 0 i dont know how to draw a line then, since it is supposed to be a curve.

export const optionsMap = () => ({
  maintainAspectRatio: false,
  responsive: true,
  legend: {
    display: false
  },
  elements: {
    topLabel: {}
  },
  layout: {
    padding: {
      top: 150,
      right: 45,
      left: 40,
      bottom: 5,
    }
  },
  plugins: {
    centerText: false,
    datalabels: false,
  },
  annotation: {
    drawTime: 'beforeDatasetsDraw',
    annotations: [
      {
        type: 'line',
        scaleID: 'y-axis-0',
        value: 0.01,
        mode: "horizontal",
        borderColor: "#347aeb",
        borderWidth: 2,
        backgroundColor: "rgba(255, 0, 0, 0.3)"

      }
    ]
  }
});

Does this answer your question? https://stackoverflow.com/a/62132601/2358409 — uminder, Jan 17 '21 at 08:32
This function is drawing a horizontal line. What I need is that when the value is more than zero, I should be able to draw a line around the point, where the line should start from zero and connect the point. I have tried a couple of plugins which I wrote myself but no success. The client requires it. I am way too deep into the project changes libraries now. — Farrukh Rashid, Jan 17 '21 at 08:37

score 1 · Accepted Answer · edited Jan 25 '21 at 05:09

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.

Draw a line around a single point in the linechart

1 Answers1