Basic Gauge in React
Using ApexCharts with React
This Basic Gauge 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'
const ApexChart = () => {
const [state, setState] = React.useState({
series: [72],
options: {
chart: {
height: 350,
type: 'gauge',
},
labels: ['Progress'],
},
})
return (
<div>
<div id="chart">
<ReactApexChart
options={state.options}
series={state.series}
type="gauge"
height={350}
/>
</div>
</div>
)
}
export default ApexChart