How to use Chart.js with Typescript without getting assignable errors?

Question

I'm trying to use the library Chart.js in my Angular application with Typescript, but I'm getting the following error:

Error: Object literal may only specify known properties, and 'stepSize' does not exist in type 'TickOptions'.

Looking at the TickOptions interface, the property is really not present there, but it's on another interface that extends TickOptions, the interface LinearTickOptions:

interface LinearTickOptions extends TickOptions {
    maxTicksLimit?: number;
    stepSize?: number;
    suggestedMin?: number;
    suggestedMax?: number;
}

How to make Typescript look for the interface LinearTickOptions instead of TickOptions? This is the code that shows the error:

new Chart(this.clientsPerMonthElement.nativeElement, {
  type: 'line',
  data: {
    labels,
    datasets: [{
      data,
      label: 'Clientes no mês',
      backgroundColor: 'transparent',
      borderColor: lineColor,
      borderWidth: 2,
      pointBackgroundColor: lineColor,
      pointRadius: 4,
    }],
  },
  options: {
    legend: {
      display: false,
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 1, // I'm getting an error here
        },
      }],
    },
  },
});

Same issue here, anyone with solution for this. I can't build my project — Ivo Bogoevski
– Ivo Bogoevski, Commented Sep 21, 2018 at 15:26
@IvoBogoevski, I couldn't solve so I removed the type definition dependency for now. — Sandro Simas
– Sandro Simas, Commented Oct 8, 2018 at 15:51

Quoc Nguyen · Accepted Answer · 2018-10-10 03:06:43Z

2

Had the same issue but I have found a solution for this

You will need to import the LinearTickOptions from 'chart.js' as well

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

You will then need to create a variable that holds this information

xAxisTickOptions: LinearTickOptions = {
  min: 0,
  stepSize: 0.02,
};

You will need to separate variables if the use X and Y with different step values (obviously)

from there we can go and just reference the variable in the options object

xAxes: [
       {
         type: 'linear', //optional
         ticks: this.xAxisTickOptions,
         ...
        }
      ]

Everything should resolve itself from there. My best guess at this reason is because the Axes implement TickOptions | LinearTickOptions | ... . So it will just grab hold of the first option unless you want to implement the whole LinearTickOptions interface in the tick object

Hope this helps :)

edited Oct 10, 2018 at 3:06

Quoc Nguyen

3,0376 gold badges27 silver badges32 bronze badges

answered Oct 10, 2018 at 1:14

KaSSii

413 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sandro Simas Over a year ago

It seems that updating everything to the latest version, the error is solved. Here it wasn't necessary to import LinearTickOptions.

Collectives™ on Stack Overflow

How to use Chart.js with Typescript without getting assignable errors?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related