Basic Icicle in React
Using ApexCharts with React
This Basic Icicle example wires ApexCharts into React through the react-apexcharts component.
Install it with npm install react-apexcharts apexcharts, then mount the chart with <Chart type="..." options={options} series={series} />.
import React from 'react'
import ReactApexChart from 'react-apexcharts'
import './styles.css'
import 'apexcharts/icicle'
const ApexChart = () => {
const [state, setState] = React.useState({
series: [
{
data: [
{
x: 'All storage',
children: [
{
x: 'Engineering',
children: [
{
x: 'Platform',
children: [
{ x: 'Build', y: 210 },
{ x: 'Runtime', y: 160 },
{ x: 'Tooling', y: 70 },
],
},
{
x: 'Product',
children: [
{ x: 'Web', y: 180 },
{ x: 'Mobile', y: 120 },
],
},
{ x: 'Data', y: 140 },
],
},
{
x: 'Design',
children: [
{ x: 'Research', y: 60 },
{ x: 'Brand', y: 45 },
{ x: 'Systems', y: 35 },
],
},
{
x: 'Operations',
children: [
{ x: 'Support', y: 90 },
{ x: 'Finance', y: 40 },
],
},
],
},
],
},
],
options: {
chart: {
type: 'icicle',
height: 420,
},
colors: ['#0EA5E9', '#14B8A6', '#F59E0B'],
title: {
text: 'Storage used, by department and team',
align: 'left',
},
subtitle: {
text: 'Click a band to zoom into that branch',
align: 'left',
},
plotOptions: {
icicle: {
borderRadius: 3,
spacing: 2,
dataLabels: {
showValue: true,
},
},
},
stroke: {
width: 1,
colors: ['#fff'],
},
},
})
return (
<div>
<div id="chart">
<ReactApexChart
options={state.options}
series={state.series}
type="icicle"
height={420}
/>
</div>
</div>
)
}
export default ApexChart