Chartjs-ChartJs: remove line between two points

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

Leave a comment