2👍
You can use the segments for this like so:
import { Component, OnInit } from "@angular/core";
import Chart from "chart.js/auto";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
title = "CodeSandbox";
ngOnInit() {
const chart = new Chart("tt", {
type: "line",
data: {
labels: ["Red", "blue", "Pink", "Grey"],
datasets: [
{
label: "ff",
data: [5, 4, 2, 6],
pointBorderColor: "red",
pointBackgroundColor: "red",
segment: {
borderColor: (ctx) =>
ctx.p1DataIndex !==
chart.data.datasets[ctx.datasetIndex].data.length - 1
? "red"
: "transparent"
}
}
]
},
options: {}
});
}
}
Codesandbox: https://codesandbox.io/s/kind-shockley-w3swt?file=/src/app/app.component.ts
- Chartjs-Chart.js 2 – Always display only some tooltips in bubble chart
- Chartjs-Chart Js Line chart with fill on click with full information of its legend text
Source:stackexchange.com