Definitelytyped: [@type/chart.js] Missing precision property in NestedTickOptions

[darylteo]

• [x] I tried using the @types/chart.js package and had problems.
• [X] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [X] 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
@archy-bold
@braincore
@frabnt
@alexdor
@mahnuh
@Conrad777
@adripanico
@wertzui
@lekoaf
@ElianCordoba

---

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

if defined and stepSize is not specified, the step size will be rounded to this many decimal places.

[lekoaf]

Does this mean that this is in the wrong place or that we are missing precision on some other interface?

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

[adripanico]

* @types/xxxx

What is @types/xxxx ?

[adripanico]

The link to the documentation that you have provided is talking about linear scales' ticks and as @lekoaf indicates, the precision property is correctly provided for such interface.

[darylteo]

Apologies @lekoaf @adripanico for the lack of information.

What is @types/xxxx ?

Apologies again, I wasn't aware this was meant to be "filled in" as such. I have edited to match @types/chart.js

---

        private get options(): Chart.ChartOptions {
            const unit = this.interval;

            return {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false,
                },
                layout: {
                    padding: {
                        top: 5,
                        right: 5,
                    },
                },
                scales: {
                    yAxes: [{
                        id: 'followers',
                        display: true,
                        gridLines: {
                            display: false,
                            drawTicks: false,
                        },
                        ticks: {
                            display: true,
                            beginAtZero: true,
                            padding: 5,
                            precision: 0,
                        },
                    }, ...
            };

Here is the config I currently have. It is giving me a type check error for precision

ticks is marked as TickOptions, not LinearTickOptions as I'm coercing it to ChartOptions. LinearTickOptions as you mention, is used in LinearScale.

Type '{ yAxes: ({ id: string; display: true; gridLines: { display: false; drawTicks: false; }; ticks: { display: true; beginAtZero: true; padding: number; precision: number; }; } | { id: string; display: true; position: string; gridLines: { ...; }; ticks: { ...; }; })[]; xAxes: { ...; }[]; }' is not assignable to type 'ChartScales'.
  Types of property 'yAxes' are incompatible.
    Type '({ id: string; display: true; gridLines: { display: false; drawTicks: false; }; ticks: { display: true; beginAtZero: true; padding: number; precision: number; }; } | { id: string; display: true; position: string; gridLines: { ...; }; ticks: { ...; }; })[]' is not assignable to type 'ChartYAxe[]'.
      Type '{ id: string; display: true; gridLines: { display: false; drawTicks: false; }; ticks: { display: true; beginAtZero: true; padding: number; precision: number; }; } | { id: string; display: true; position: string; gridLines: { ...; }; ticks: { ...; }; }' is not assignable to type 'ChartYAxe'.
        Type '{ id: string; display: true; gridLines: { display: false; drawTicks: false; }; ticks: { display: true; beginAtZero: true; padding: number; precision: number; }; }' is not assignable to type 'ChartYAxe'.
          Types of property 'ticks' are incompatible.
            Type '{ display: true; beginAtZero: true; padding: number; precision: number; }' is not assignable to type 'TickOptions'.
              Object literal may only specify known properties, and 'precision' does not exist in type 'TickOptions'.

Should I be doing this instead?

                    yAxes: [{
                        id: 'followers',
                        display: true,
                        gridLines: {
                            display: false,
                            drawTicks: false,
                        },
                        ticks: {
                            display: true,
                            beginAtZero: true,
                            padding: 5,
                            precision: 0,
                        },
                    } as LinearScale, ...

Thank you and I will try to be better at issue submissions in the future.

[adripanico]

Ok, it looks like there is a problem with the definitions.

LinearScale, LogarithmicScale and TimeScale extends ChartScales, but in the scales property of ChartOption interface only ChartScales is allowed.

The chart.js documentation is quite a mess and this needs to be fix carefully, maybe I have time during this weekend to take a look to this. In the meanwhile, if the casting as LinearScale works for you, keep it.

[adripanico]

@darylteo, can you check whether the last version solves your issue?

[darylteo]

private get options(): Chart.ChartOptions {
            const unit = this.interval;

            return {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false,
                },
                layout: {
                    padding: {
                        top: 5,
                        right: 5,
                    },
                },
                scales: {
                    yAxes: [{
                        id: 'followers',
                        display: true,
                        gridLines: {
                            display: false,
                            drawTicks: false,
                        },
                        ticks: {
                            display: true,
                            padding: 5,
                            precision: 0,
                        },
                    }, {
                        id: 'views',
                        display: true,
                        position: 'right',
                        gridLines: {
                            display: true,
                            tickMarkLength: 0,
                        },
                        ticks: {
                            display: false,
                            beginAtZero: true,
                            maxTicksLimit: 5,
                        },
                    }],
                    xAxes: [{
                        type: 'time',
                        time: {
                            unit: unit,
                        },
                        barThickness: 10,
                        gridLines: {
                            display: false,
                        },
                        ticks: {
                            maxRotation: 0,
                            minRotation: 0,
                        },
                    }],
                },
            };
        }

TS2322: Type '{ yAxes: ({ id: string; display: true; gridLines: { display: true; drawTicks: false; }; ticks: { display: true; beginAtZero: true; padding: number; precision: number; }; } | { id: string; display: true; position: string; gridLines: { ...; }; ticks: { ...; }; })[]; xAxes: { ...; }[]; }' is not assignable to type 'ChartScales | LinearScale | LogarithmicScale | TimeScale | undefined'.
  Type '{ yAxes: ({ id: string; display: true; gridLines: { display: true; drawTicks: false; }; ticks: { display: true; beginAtZero: true; padding: number; precision: number; }; } | { id: string; display: true; position: string; gridLines: { ...; }; ticks: { ...; }; })[]; xAxes: { ...; }[]; }' is not assignable to type 'TimeScale'.
    Types of property 'yAxes' are incompatible.
      Type '({ id: string; display: true; gridLines: { display: true; drawTicks: false; }; ticks: { display: true; beginAtZero: true; padding: number; precision: number; }; } | { id: string; display: true; position: string; gridLines: { ...; }; ticks: { ...; }; })[]' is not assignable to type 'ChartYAxe[]'.
        Type '{ id: string; display: true; gridLines: { display: true; drawTicks: false; }; ticks: { display: true; beginAtZero: true; padding: number; precision: number; }; } | { id: string; display: true; position: string; gridLines: { ...; }; ticks: { ...; }; }' is not assignable to type 'ChartYAxe'.
          Type '{ id: string; display: true; gridLines: { display: true; drawTicks: false; }; ticks: { display: true; beginAtZero: true; padding: number; precision: number; }; }' is not assignable to type 'ChartYAxe'.
            Types of property 'ticks' are incompatible.
              Type '{ display: true; beginAtZero: true; padding: number; precision: number; }' is not assignable to type 'TickOptions'.
                Object literal may only specify known properties, and 'precision' does not exist in type 'TickOptions'.

I was previously using @ts-ignore for the precision field, removing it yields the above.

Using @types/chart.js@^2.8.9, typescript/^3.6.3

Let me know if I've done something wrong. 🙏

[cesaric]

I think there's a fundamental flaw in the Type Definitions. The difference between ChartOptions scale vs scales is what's making this confusing:

interface ChartOptions {
       ...
        scale?: RadialLinearScale;
        scales?: ChartScales | LinearScale | LogarithmicScale | TimeScale;
       ...
    }

The scale property is for radial axes which only applies to Radar and Polar.

So I think we're _incorrectly_ implementing the ticks property like this for scales:

    interface ChartScales {
        ...
        ticks?: TickOptions; 
        xAxes?: ChartXAxe[];
        yAxes?: ChartYAxe[];
    }

same for:

    interface LinearScale extends ChartScales {
        ticks?: LinearTickOptions;
    }

I believe Radar is the only chart that can implement ticks like that since it's the only one that supports a single scale.

Maybe we could fix all this with something like:

    //Modify
    interface LinearScale extends ChartScales {
        xAxes?: LinearXAxe[];
        yAxes?: LinearYAxe[];
    }

    //New
    interface LinearXAxe extends ChartXAxe {
       ticks?: LinearTickOptions; //Not sure if LinearTickOptions applies to x-axis
    }

    //New
    interface LinearYAxe extends ChartYAxe {
       ticks?: LinearTickOptions;
    }

Lastly, here's what I'm doing for now to get IDE type hints and avoid build errors:

  myOptions:ChartOptions | any = { 
    scales: {
      yAxes: [{
        ticks: {
          max: 150,
          stepSize: 20,
          precision: 0 // "any" type above prevents build errors on this setting.
        }
      }]
    },
    responsive: true,
    maintainAspectRatio: false
  };

[evenfrost]

Any update? precision types are still incorrect.

I'm currently doing type assertion as follows:

          ticks: {
            padding: 25,
            precision: 0,
          } as LinearTickOptions, // import { LinearTickOptions } from 'chart.js';