Where to put the 'type' prop / option in react-apexcharts?

Question

Seems that there are at least three 'locations' where I can define the type of a chart (e.g. 'bar', 'line', etc.)

1. As a prop of the Chart component <Chart type='bar'...
2. According to the Apexcharts docs it can also be set on the series
3. And finally it can be set on the chart option like chart: {type: 'bar'}

I used to set the type on the series, but the Chart component requires the prop 'type' (v1.5) and react-apexcharts throws an error if it the value is undefined.

Question: Can somebody explain when to use what and especially: How can I create a chart with mixed types of multiple series, if the required prop can only contain one type? Is there some kind of 'Overwrite Sequence'?

Answer 1

The type in options.chart is superseded by the type attribute ("prop of the component"). Even if there were conflicting values in the component and in options.chart (of course, not recommended), the react component value takes precedence.

The type in series should only be set for those series that are of a different type than the chart itself, in a mixed type chart. So, to create a mixed chart you should set the type of the chart in the react component, add one or more series of the same type (no need to set their series type option) and one or more series of a different, compatible type (should specify their type in the series options).

You may see that in the docs react mixed chart example, and in this version of it with redundant type specifications commented out.