☰
Why Choose ApexCharts
- 20 chart types
- 1 million weekly downloads
- 100+ samples includes
const ApexChart = () => {
const [state, setState] = React.useState({
series: [
{
data: [-33, -13, -45, 95, 12, 15, -34, -61, 66, 82, 1, -36]
}
],
options: {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false,
},
},
dataLabels: {
enabled: false,
},
title: {
text: 'Negative color for values less than 0',
align: 'left',
},
xaxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
},
stroke: {
width: 5,
curve: "monotoneCubic"
},
plotOptions: {
line: {
colors: {
threshold: 0,
colorAboveThreshold: '#0088ee',
colorBelowThreshold: '#ff0000',
},
},
}
},
});
return (
<div>
<div id="chart">
<ReactApexChart options={state.options} series={state.series} type="line" 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="line" height={350} />
</div>
Reset Password
Enter your email address and we'll send you a link to reset your password.
Back to Login
Please wait...