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:
<LineSeries name="Revenue" dataMapping={{ y: "Revenue" }} />Type '{ name: string; dataMapping: { y: string; }; }' is not assignable to type 'IntrinsicAttributes & LineSeriesProps'.
Property 'dataMapping' does not exist on type 'IntrinsicAttributes & LineSeriesProps'.
SeriesProps<K> 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<K>, matching the reference doc example.
2. Option-component children rejects a mixed array of text and elements (Title, Subtitle, Credits, Legend, XAxis, YAxis)
<Subtitle>
Source: <a href="https://example.com">Example</a>
</Subtitle>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<unknown, string | JSXElementConstructor<any>> | ReactElement<unknown, string | JSXElementConstructor<any>>[] | 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: ", <a>...</a>]), 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
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.
dataMappingnot declared as a direct prop on series components, despite the reference docs showing it that wayAs shown in the official data-table.md reference doc. Works at runtime, fails TypeScript:
SeriesProps<K>only promotes a fixed set of options as direct props (id,index,name,type,className,color,events,data).dataMappingisn't in that list even though it's part ofSeriesLineOptions(and every other series options type) in Highcharts v13. At runtime,getChildPropscollects all props outsidechildren/options/type/dataintootherPropsand merges them into the series config, sodataMappingis applied correctly. The type declaration simply doesn't expose it as a direct prop.Suggested fix: add
dataMappingto the direct props mapped inSeriesProps<K>, matching the reference doc example.2. Option-component
childrenrejects a mixed array of text and elements (Title,Subtitle,Credits,Legend,XAxis,YAxis)childrenon these six components is typed asstring | (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: ", <a>...</a>]), 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
childrenonTitle,Subtitle,Credits,Legend,XAxis, andYAxisto also accept a mixed array, e.g.(string | number | React.ReactElement)[].Live demo with steps to reproduce
N/A
Product version
Affected browser(s)
N/A