A React component for the ECharts library
In order to use react-echarts, all you need to do is install the npm package:
yarn add @hcorta/react-echarts
echartsandreactare peerDependencies ofreact-echarts, you may install your own versions.
Apache ECharts is a free, powerful charting and visualization library offering intuitive, interactive, and highly customizable charts. It is written in pure JavaScript and based on zrender, a canvas library.
react-echarts is an abstraction wrapper built with React on top of Apache ECharts. Its main principles of are:
- Simplicty:
react-echartsmakes it easy to generate ECharts components by wrapping the code required to interact with the core library. - Declarative: components are purely presentational.
To start using react-echarts, you just need to import the <EChart /> component from the root folder. Check the props section out for more info:
import { EChart } from '@hcorta/react-echarts'
function MyChart() {
return (
<EChart
className={'my-classname'}
xAxis={{
type: 'category'
}}
yAxis={{
type: 'value',
boundaryGap: [0, '30%']
}}
series={[
{
type: 'line',
data: [
['2022-10-12', 750],
['2022-10-17', 300],
['2022-10-18', 100]
]
}
]}
/>
)
}In case you need to have more control over the container being used by the library to render ECharts, a special hook useECharts is provided.
export const EChart: FC<EChartProps> = (props) => {
const containerRef: Ref<HTMLDivElement> = useRef()
useECharts({ containerRef, ...props })
return (
<div
ref={containerRef}
id={id}
/>
)
}While some props have been provided to facilitate specific use cases, most of them follow the Apache ECharts option schema. The following props, grouped by category, are available:
| Prop | Type | Description | Default |
|---|---|---|---|
id |
{String} |
id of the container | '' |
className |
{String} |
Classname of the container | '' |
style |
{Object} |
Style object applied to the container | null |
| Prop | Type | Description | Default |
|---|---|---|---|
notMerge |
{Boolean} |
Whether or not to merge with previous option | false |
lazyUpdate |
{Boolean} |
Whether or not to update chart immediately; | false |
theme |
{String} |
Theme to be applied. This can be a configuring object of a theme, or a theme name registered | '' |
group |
{String} |
Group name to be used in chart connection. | '' |
renderer |
{String} |
Supports 'canvas' or 'svg' | 'svg' |
For more detailed info, check the ECharts docs
| Prop | Type | Description | Default |
|---|---|---|---|
onMount |
{Function} |
Callback to be called on first component mount. | null |
onUpdate |
{Function} |
Callback to be called whenever the component is updated. | null |
onUnmmount |
{Function} |
Callback to be called when the component is unmounted. | null |
onRendered |
{Function} |
Trigger when a frame rendered. Notice that the rendered event does not indicate that the animation finished | null |
onFinished |
{Function} |
Triggered when render finished, that is, when animation finished | null |
onClick |
{Function} |
Event of chart click. | null |
onDoubleClick |
{Function} |
Event of double chart click. | null |
onMouseDown |
{Function} |
Event of mouse down chart | null |
onMouseMove |
{Function} |
Event of mouse mouse chart | null |
onMouseUp |
{Function} |
Event of mouse up chart | null |
onMouseOver |
{Function} |
Event of mouse over chart | null |
onMouseOut |
{Function} |
Event of global out chart | null |
onGlobalOut |
{Function} |
Event of global out chart | null |
onContextMenu |
{Function} |
Event of context menu | null |
onHighlight |
{Function} |
Event of data highlight. | null |
onDownplay. |
{Function} |
Event of data downplay. | null |
onSelectChanged |
{Function} |
Event emitted when data selection is changed. | null |
onLegendSelectChanged |
{Function} |
Event emitted after legend selecting state changes. | null |
onLegendSelected |
{Function} |
Event emitted after legend is selected. | null |
onLegendUnselected |
{Function} |
Event emitted after unselecting legend. | null |
onLegendSelectAll |
{Function} |
Event emitted after all legends are selected. | null |
onLegendInverseSelect |
{Function} |
Event emitted after inversing all legends. | null |
onLegendScroll |
{Function} |
Event when trigger legend scroll. | null |
onDataZoom |
{Function} |
Event emitted after zooming data area. | null |
onDataRangeSelected |
{Function} |
Event emitted after range is changed in visualMap. | null |
onTimelineChanged |
{Function} |
Event emitted after time point in timeline is changed. | null |
onTimelinePlayChanged |
{Function} |
Switching event of play state in timeline. | null |
onRestore |
{Function} |
Resets option event. | null |
onDataViewChanged |
{Function} |
Changing event of data view tool in toolbox. | null |
onMagicTypeChanged |
{Function} |
Switching event of magic type tool in toolbox. | null |
onGeoSelectChanged |
{Function} |
Event emitted after selecting state changes. | null |
onGeoSelected |
{Function} |
Event after selecting. | null |
onGeoUnselected |
{Function} |
Cancels selected event. | null |
onAxisAreaSelected |
{Function} |
Selecting event of range of parallel axis. | null |
onFocusNodeadJacency |
{Function} |
Adjacent nodes highlight event in graph. | null |
onUnfocusNodeAdjacency |
{Function} |
Adjacent nodes reverse-highlight event in graph. | null |
onBrush |
{Function} |
Event triggered after action brush dispatched. | null |
onBrushEnd |
{Function} |
Event triggered after action brushEnd dispatched. | null |
onBrushSelected |
{Function} |
Notice what are selected. | null |
onGlobalCursorTaken |
{Function} |
- | null |
No one’s perfect. If you’ve found any errors, want to suggest enhancements, or expand on a topic, please feel free to open an Issue or collaborate by PR.
Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
react-echarts is open source software licensed as MIT ©hcorta.