Function ApexColumn

This multi-widget shows two charts into one. A time-series chart, as well as a column chart with the aggregated values.

Moreover, you can accomodate more than one chart at the same time. Meaning, you could aggregate different time-series chart in the same widget by switching through tabs.

It gets its data from an array of value-label-timestamp elements. These charts are fully customizable.

Example

Here's the most basic example

<ApexColumn data={data} />

Remarks

You can change how to visualize the time-series charts.

By default, it shows elements as columns, but this can be changed to lines or areas through timeSerieGraphType prop.

Also, you can update how the elements from these lines or areas connect with each other.

To achieve this, you can play with timeSerieCurve prop until you get your desired result.

Example

Here's an example of a line chart using a step lines to connect its values

<ApexColumn data={data} timeSerieGraphType={'line'} timeSerieCurve={'stepline'} />

You can also customize other visual properties such as height, color scale color, allowZoom, showToolbar and so on. By using the corresponding props.

Also, you have access to more advance customization by exposing the underlining library apexcharts through timeSerieChartOptionsOverrides and columnChartOptionsOverrides props.