XAxisProps.labels.style and YAxisProps.labels.style incorrectly typed

[Lissandre]

The style property on XAxisProps.labels and YAxisProps.labels is typed as a { fontSize?: number | string; } and prevents us from stylizing the labels correctly

Current type in @highcharts/react:

// node_modules/@highcharts/react/options/XAxis.d.ts
labels?: {
    ...
    style?: {
        fontSize?: number | string;
    };
    ...
}

Correct type from highcharts:

// node_modules/highcharts/highcharts.d.ts - XAxisLabelsOptions
style?: (CSSObject|XAxisLabelsStyleOptions);

The Highcharts API documentation indicates it could be a CSSObject (and uses it in the example)

The error:

When following the incorrect types and passing for example a color attribute in the styles:

Object literal may only specify known properties, and 'color' does not exist in type '{ fontSize?: string | number | undefined; }'.ts(2353)

Expected type:

style?: (CSSObject|XAxisLabelsStyleOptions);

Versions:

@highcharts/react: 4.2.1
highcharts: 12.5.0

[kennethbigler]

Yeah I'd like to add to this, I'm often using:

        <XAxis
          ...
          lineColor={color}
          // @ts-expect-error: types are wrong in @highcharts/react
          labels={{ style: { color } }}
        />

Also YAxis plotBands needs to be an array type (currently it is missing the array [] at the end of the type)

[KamilKubik]

Hello Lissandre, thanks for reporting this!

I can confirm it's clearly an issue that we'll take a closer look at.

Thanks for flagging the array type problem as well, kennethbigler. This is a known issue that has already been covered internally and will be released in v5.0.0.