highcharts / highcharts/highcharts-react
Type declarations reject two documented patterns: dataMapping as a series prop, mixed text/element children
- Dominant language
- JavaScript
- Stars
- 1.2k
- Forks
- 111
- Avg merge
- 9h 25m
- Merged PRs (30d)
- 2
Description
#### Expected behaviour
The two snippets below compile. The underlying option/pattern in each is documented and works correctly at runtime, so the exposed prop types should accept it.
#### Actual behaviour
TypeScript in strict mode rejects both snippets. Both gaps are declaration-only. Only the exposed prop types are incomplete.
##### 1. `dataMapping` not declared as a direct prop on series components, despite the reference docs showing it that way
As shown in the official data-table.md reference doc. Works at runtime, fails TypeScript:
```tsx
```
```
Type '{ name: string; dataMapping: { y: string; }; }' is not assignable to type 'IntrinsicAttributes & LineSeriesProps'.
Property 'dataMapping' does not exist on type 'IntrinsicAttributes & LineSeriesProps'.
```
`SeriesProps` only promotes a fixed set of options as direct props (`id`, `index`, `name`, `type`, `className`, `color`, `events`, `data`). `dataMapping` isn't in that list even though it's part of `SeriesLineOptions` (and every other series options type) in Highcharts v13. At runtime, `getChildProps` collects all props outside `children`/`options`/`type`/`data` into `otherProps` and merges them into the series config, so `dataMapping` is applied correctly. The type declaration simply doesn't expose it as a direct prop.
Suggested fix: add `dataMapping` to the direct props mapped in `SeriesProps`, matching the reference doc example.
##### 2. Option-component `children` rejects a mixed array of text and elements (`Title`, `Subtitle`, `Credits`, `Legend`, `XAxis`, `YAxis`)
```tsx
Source: Example
```
```
Type '{ children: (string | Element)[]; }' is not assignable to type 'SubtitleProps'.
Types of property 'children' are incompatible.
Type '(string | Element)[]' is not assignable to type 'string | (string | number)[] | ReactElement> | ReactElement>[] | undefined'.
Type '(string | Element)[]' is not assignable to type '(string | number)[]'.
```
`children` on these six components is typed as `string | (string | number)[] | React.ReactElement | React.ReactElement[]`. Every array variant is homogeneous. JSX with mixed text-and-element children compiles to a `(string | Element)[]` (e.g. `["Source: ", ...]`), which matches none of the declared variants. At runtime this renders correctly: the library's built-in HTML serialization converts mixed children into the same string a hand-written literal would produce.
Suggested fix: widen `children` on `Title`, `Subtitle`, `Credits`, `Legend`, `XAxis`, and `YAxis` to also accept a mixed array, e.g. `(string | number | React.ReactElement)[]`.
#### Live demo with steps to reproduce
N/A
#### Product version
- @highcharts/react: 5.2.2
- Highcharts Core: 13.0.0
#### Affected browser(s)
N/A
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.