highcharts / highcharts/highcharts-react

Type declarations reject two documented patterns: dataMapping as a series prop, mixed text/element children

Open
#582 0 comments 1 reaction 1 assignee Claimed by @KamilKubik View on GitHub
bug
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.