Definitelytyped: Chart.js - Object literal may only specify known properties, and 'stepSize' does not exist in type 'TickOptions'.

[sandrocsimas]

If you know how to fix the issue, make a pull request instead.

• [X] I tried using the @types/xxxx package and had problems.
• [X] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [ ] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [X] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @anuti, @FabienLavocat, @KentarouTakeda, @larrybahr, @mernen, @josefpaij, @danmana, @guillaume-ro-fr, @chicoxyzzy, @archy-bold, @braincore, @gebeto, @frabnt, @alexdor.
  
  

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:
````
import {Chart} from 'chart.js';

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
},
}],
},
},
});
These are my chart.js dependencies:
"@types/chart.js": "2.7.28",
"chart.js": "2.7.2",
````

[praveenpuglia]

And it's gonna be literally almost a year and still nothing :( Same issue today.

[fmozaffari]

same issue today

[gebeto]

need to add types to Charts.js package 😄

[mariah123]

still today ....

Also,

Type '{ gridLines: { display: false; }; barPercentage: number; barThickness: number; }' is not assignable to type 'ChartXAxe'. Object literal may only specify known properties, and 'barPercentage' does not exist in type 'ChartXAxe'.

[rafaelbiten]

I had the same issue today with the maxBarThickness prop and the solution was to refactor it from scales.xAxes[{ maxBarThickness }] to be a barThickness prop inside datasets.

[danmana]

I think we can close this issue.

The original issue is no longer reproducible.
TickOptions now extends NestedTickOptions which has stepSize?: number;

@mariah123
It looks like you are trying to add barPercentage on an ChartXAxe, but that is not supported.
barPercentage should be placed on a dataset - see https://www.chartjs.org/docs/latest/charts/bar.html?h=barpercentage

Similar with what @rafaelbiten already figured out with maxBarThickness https://www.chartjs.org/docs/latest/charts/bar.html?h=maxbarthickness

[ashish-nodejs]

still today ....

Also,

Type '{ gridLines: { display: false; }; barPercentage: number; barThickness: number; }' is not assignable to type 'ChartXAxe'.
 Object literal may only specify known properties, and 'barPercentage' does not exist in type 'ChartXAxe'.

any luck for this issue ... I also getting same ...

[joshbhavesh12]

'{ barPercentage: number; ticks: { fontColor: string; fontSize: number; stepSize: number; beginAtZero: boolean; padding: number; }; }' is not assignable to type 'ChartXAxe'.

[ng] Object literal may only specify known properties, and 'barPercentage' does not exist in type 'ChartXAxe'

[danmana]

@ashish-nodejs @joshbhavesh12 barPercentage does not go on the ChartXAxe, you have to set it on the dataset!

Here is the documentation: https://www.chartjs.org/docs/latest/charts/bar.html#dataset-configuration

const chart = new Chart(canvas, {
  type: "bar",
  data: {
    labels: ["January", "February", "March"],
    datasets: [
      {
        label: "My Dataset",
        data: [65, 59, 80],
        fill: false,
        barPercentage: 0.5, // < --- here, on the dataset
        barThickness: 'flex',
        maxBarThickness: 10,
        minBarLength: 2
      }
    ]
  },
  options: {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  }
});

Here is a working example: https://codepen.io/danmana/pen/XWXwVZB?editors=0010