[Chartjs]-Chart.js Types of property 'type' are incompatible. Type 'string' is not assignable to type '"line" | "bar" | "scatter"

by

13👍

Looks like your TypeScript compiler is complaining because the chart type property is a specific type rather than a string.

Option 1:

Import ChartType and cast type as ChartType.

import {  Chart, ChartType, ...} from 'chart.js';

 ...

function createChartConfig({labels, data, label, color}: ChartConfig) {
  return {
    type: 'line' as ChartType,
    options: {
   ...

Option 2: (The easier/hacky way)

Cast the entire config as any.

new Chart(gainCtx, createChartConfig(gainConfig) as any);

In any case, you will need to import and register the needed controllers, elements, scales, etc. Registering registerables registers everything, but it is better to register only what you require for your specific chart. See the Integration instructions for more information.

import { Chart, registerables } from 'chart.js';
...
Chart.register(...registerables);

2👍

I had a similar error, when Googling the error this SO question came up so I will drop a related solution here.

This is somewhat of a work around, but I was getting this error:

Types of property 'borderJoinStyle' are incompatible.
            Type 'string' is not assignable to type '"miter" | "round" | "bevel" | ((ctx: ScriptableContext<"line">, options: AnyObject) => CanvasLineJoin | undefined) | undefined'.

To resolve the issue I changed my setting from borderJoinStyle: "miter" to borderJoinStyle: "miter" as const.

I was also getting this error:

Types of property 'borderCapStyle' are incompatible.
            Type 'string' is not assignable to type '"butt" | "round" | "square" | ((ctx: ScriptableContext<"line">, options: AnyObject) => CanvasLineCap | undefined) | undefined'.

I made a similar change as above. Changed from borderCapStyle: "round" to borderCapStyle: "round" as const

I found the answer on Github:

https://github.com/apexcharts/react-apexcharts/issues/347#issuecomment-932848265

1👍

First, you need to include the library from chart.js/auto, and not from chart.js.

I wrote about this in more detail in a similar topic here.

To avoid an error, the function for generating configurations createChartConfig() must return data corresponding to the interface signature ChartConfiguration,
or a generalization <ChartConfiguration> must be written for the called function.
Accordingly, it is also necessary to connect ChartConfiguration from chart.js/auto.

The final working code will look like this:

import { Chart, ChartConfiguration } from 'chart.js/auto'

ngAfterViewInit (): void {
   // .......
   new Chart(gainCtx, <ChartConfiguration>createChartConfig(gainConf)) // with generic
   new Chart(orderCtx, createChartConfig(orderConfig)) // without generic
   // .......
}

function createChartConfig ({ labels, data, label, color}: { labels: string[], data: number[], label: string, color: string }): ChartConfiguration {
  return {
    type: 'line',
    data: {
      labels,
      datasets: [{
        label,
        data,
        borderColor: color,
        // steppedLine: false, // v. 3.x <-- deprecated and was removed
        stepped: false, // v. 4
        fill: false
      }]
    },
    options: {
      responsive: true
    }
  }
}

Leave a comment