Register with Chart.register?

[awdorrin]

Using the following:

"chart.js": "^4.4.2",
"chartjs-plugin-annotation": "^3.0.1",
"chartjs-plugin-colorschemes": "^0.4.0",
"chartjs-plugin-datalabels": "^2.2.0",
"ng2-charts": "^5.0.4",

I am trying to create a custom color scheme, as shown in the docs:

colors: string[] = ['#43B02A', '#61B3E4', '#9E7691', '#70A087', '#00968F', '#CC6C4E', '#005E5D', '#007396', '#59315F', '#414042', '#003CA6', '#7DDBD3', '#FFCD00'];
 public lineChartOptions: ChartConfiguration['options'] = {
   responsive: true,
   plugins: {
     legend: { position: 'top', },
     title: { display: true, text: 'Chart.js Line Chart' },
     colorscheme: { scheme: this.colors, }
   }
 };
 public lineChartType: ChartType = 'line';

however, I get an error on the colorscheme line stating: Object literal my only specify known properties, and 'colorscheme' does not exist in type '_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>'

I figure this is a ng2-charts issue, related to Chart.register() - but I have not been able to figure out how to register this plugin.

[tranquanghuy0801]

@awdorrin Did you figure out the solution for this? I tried to import colorscheme and then use in Chart.register but still did not work. Have this issue in Next.js app

import ColorSchemesPlugin from 'chartjs-plugin-colorschemes'
Chart.register(
  ColorSchemesPlugin
)

[awdorrin]

I wound up not using the color scheme plugin and used Colors from chart.js directly.

import { Chart, Colors } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';
...
        this.colors = [
            '#43B02A', '#61B3E4', '#9E7691', '#70A087', '#00968F', '#CC6C4E', '#005E5D',
            '#007396', '#59315F', '#414042', '#003CA6', '#7DDBD3', '#FFCD00'
        ];
...
 Chart.register(AnnotationPlugin, Colors);
...
                this.chart1Data.datasets = [
                    {
                        label: "Attrition",
                        borderWidth: 2,
                        pointRadius: 0,
                        pointHitRadius: 3,
                        data: results.map(i => i.count),
                        backgroundColor: this.colors[0],
                        borderColor: this.colors[0],
                        pointBackgroundColor: this.colors[0],
                    }
                ];
                this.chart1?.update();
...
        this.chart3Data.datasets = [
            { label: "Low", data: [countLow], backgroundColor: [this.colors[2]], borderColor: [this.colors[2]], },
            { label: "Medium", data: [countMed], backgroundColor: [this.colors[1]], borderColor: [this.colors[1]], },
            { label: "High", data: [countHigh], backgroundColor: [this.colors[0]], borderColor: [this.colors[0]], },
        ];
...
  let dataset = {
    label: l,
    data: this.data.filter(f => f.lob == l).map(m => m.redTotalPct),
    backgroundColor: this.colors[i % this.colors.length], // pick a color based on the index and wrap around if exceeded
  };
  this.barChartData.datasets.push(dataset);
});