☰
Why Choose ApexCharts
- 20 chart types
- MIT License
- 1 million weekly downloads
- No registration needed
- 100+ samples includes
- FREE DOWNLOAD
const ApexChart = () => {
const [state, setState] = React.useState({
series: [
{
name: 'New York Temperature',
data: [
{
x: 'Jan',
y: [-2, 4]
},
{
x: 'Feb',
y: [-1, 6]
},
{
x: 'Mar',
y: [3, 10]
},
{
x: 'Apr',
y: [8, 16]
},
{
x: 'May',
y: [13, 22]
},
{
x: 'Jun',
y: [18, 26]
},
{
x: 'Jul',
y: [21, 29]
},
{
x: 'Aug',
y: [21, 28]
},
{
x: 'Sep',
y: [17, 24]
},
{
x: 'Oct',
y: [11, 18]
},
{
x: 'Nov',
y: [6, 12]
},
{
x: 'Dec',
y: [1, 7]
}
]
}
],
options: {
chart: {
height: 350,
type: 'rangeArea'
},
stroke: {
curve: 'monotoneCubic'
},
title: {
text: 'New York Temperature (all year round)'
},
markers: {
hover: {
sizeOffset: 5
}
},
dataLabels: {
enabled: false
},
yaxis: {
labels: {
formatter: (val) => {
return val + '°C'
}
}
}
},
});
return (
<div>
<div id="chart">
<ReactApexChart options={state.options} series={state.series} type="rangeArea" height={350} />
</div>
<div id="html-dist"></div>
</div>
);
}
const domContainer = document.querySelector('#app');
ReactDOM.render(<ApexChart />, domContainer);
<div id="chart">
<ReactApexChart options={state.options} series={state.series} type="rangeArea" height={350} />
</div>