Chartjs-How do I change pointBackgroundColor in Line segment on ChartJS?

by

0👍

I’ve solved like this. Just change the condition on context depending your task.

const test = (ctx, value) => (ctx.p1DataIndex >= showLast ? value : undefined)

const point = (ctx, trainCol, testCol) => ctx.index >= showLast ? testCol : trainCol


const data = {
labels: trainDates.map(val => val.format("DD-MM")),

datasets: [
  {
    label: "Test plot",
    data: values,
    borderColor: "rgb(75, 192, 192)",
    fill: false,
    pointStyle: "circle",
    pointBackgroundColor: ctx => point(ctx, "rgb(75, 192, 192)", "rgb(192,75,75)"),
    pointBorderColor: ctx => point(ctx, "rgb(75, 192, 192)", "rgb(192,75,75)"),
    segment: {
      borderColor: ctx => test(ctx, "rgb(192,75,75)"),
    },
  },
],}

Resulting plot

Leave a comment