EChart
The <EChart /> component provides a declarative and streamlined approach for
interacting with the ECharts API.
This abstraction allows developers to express the desired chart configurations and behaviors in a clear and concise manner, fostering a more intuitive and maintainable development experience. With this component, you can harness the power of ECharts while benefiting from the simplicity and expressiveness of a declarative interface.
Usage
import { EChart } from '@kbox-labs/react-echarts'
function App() {
return (
<EChart
renderer={'svg'}
onClick={() => console.log('clicked!')}
style={{
height: '600px',
width: '100%'
}}
xAxis={{
type: 'category'
}}
yAxis={{
type: 'value',
boundaryGap: [0, '30%']
}}
series={[
{
type: 'line',
data: [
['2022-10-17', 300],
['2022-10-18', 100]
]
}
]}
/>
)
}API
const EChart: FC<EChartProps & HTMLAttributes<HTMLDivElement>>HTMLDivAttributes
Apart from the specific EChart props, all props of the <div> container element
can be passed down to it.
⚠️
In scenarios where a conflict arises between container and EChart props, it's important to note that EChart props take precedence. Consequently, these props won't be directly passed to the underlying div element but will instead be applied to the ECharts instance.
- onClick
- onDoubleClick
- onMouseDown
- onMouseMove
- onMouseOut
- onMouseOver
EChartProps
The following props can be passed down to the component:
init (opens in a new tab)
| Prop | Description | Type | Default |
|---|---|---|---|
devicePixelRatio | Ratio of one physical pixel to the size of one device independent pixels | number | undefined |
height | Specify height explicitly, in pixel. If setting to null/undefined/'auto', height of dom (instance container) will be used | number or string | undefined |
width | Specify width explicitly, in pixel. If setting to null/undefined/'auto', width of dom (instance container) will be used | number or string | undefined |
group | Group name to be used in chart connection. | string | undefined |
locale | Specify the locale | string | undefined |
pointerSize | Size of expanded interaction size in pixels | number | undefined |
renderer | Supports 'canvas' or 'svg' | string | svg |
theme | Theme to be applied. This can be a configuring object of a theme, or a theme name registered | string | undefined |
useCoarsePointer | Whether to expand the response area when interacting with elements | boolean | undefined |
useDirtyRect | Enable dirty rectangle rendering or not | boolean | false |
setOption (opens in a new tab)
| Prop | Description | Type | Default |
|---|---|---|---|
lazyUpdate | Whether or not to update chart immediately; | boolean | false |
notMerge | Whether or not to merge with previous option | boolean | false |
replaceMerge | Whether or not to merge with previous option | string, string[] | false |
silent | Whether not to prevent triggering events when calling setOption | boolean | false |
transition | UpdateLifecycleTransitionOpt | `` | undefined |
option (opens in a new tab)
| Prop | Description | Type | Default |
|---|---|---|---|
angleAxis (opens in a new tab) | The angle axis in Polar Coordinate | object | undefined |
animation (opens in a new tab) | Whether to enable animation | object | undefined |
animationDelay (opens in a new tab) | Delay before updating the first animation, which supports callback function for different data to have different animation effect. | object | undefined |
animationDuration (opens in a new tab) | Duration of the first animation, which supports callback function for different data to have different animation effect | object | undefined |
animationDurationUpdate (opens in a new tab) | Time for animation to complete, which supports callback function for different data to have different animation effect | object | undefined |
animationEasing (opens in a new tab) | Easing method used for the first animation. | object | undefined |
animationThreshold (opens in a new tab) | Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold. | object | undefined |
aria (opens in a new tab) | Description | object | undefined |
backgroundColor (opens in a new tab) | Background color. No background by default. | object | undefined |
blendMode (opens in a new tab) | Sets the type of compositing operation to apply when drawing a new shape. | object | undefined |
brush (opens in a new tab) | Area-selecting component, with which user can select part of data from a chart to display in detail, or do calculations with them. | object | undefined |
calendar (opens in a new tab) | Calendar coordinates | object | undefined |
color (opens in a new tab) | The color list of palette. If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series | object | undefined |
dataset (opens in a new tab) | brings convenience in data management separated with styles and enables data reuse by different series. More importantly, it enables data encoding from data to visual, which brings convenience in some scenarios. | object | undefined |
dataZoom (opens in a new tab) | used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points | object | undefined |
geo (opens in a new tab) | Description | object | undefined |
graphic (opens in a new tab) | Description | object | undefined |
grid (opens in a new tab) | Drawing grid in rectangular coordinate. In a single grid, at most two X and Y axes each is allowed | object | undefined |
hoverLayerThreshold (opens in a new tab) | When the number of element of the whole chart is larger than hoverLayerThreshold, a separate hover layer is used to render hovered elements. | object | undefined |
legend (opens in a new tab) | Legend component | object | undefined |
media (opens in a new tab) | Description | object | undefined |
parallel (opens in a new tab) | Common way of visualizing high-dimensional geometry and analyzing multivariate data | object | undefined |
parallelAxis (opens in a new tab) | This component is the coordinate axis for parallel coordinate | object | undefined |
polar (opens in a new tab) | Polar coordinate can be used in scatter and line chart. Every polar coordinate has an angleAxis and a radiusAxis. | object | undefined |
radar (opens in a new tab) | Coordinate for radar charts | object | undefined |
radiusAxis (opens in a new tab) | Radial axis of polar coordinate | object | undefined |
series (opens in a new tab) | "" | object | undefined |
singleAxis (opens in a new tab) | An axis with a single dimension. It can be used to display data in one dimension | object | undefined |
textStyle (opens in a new tab) | Global font style | object | undefined |
timeline (opens in a new tab) | rovides functions like switching and playing between multiple ECharts options | object | undefined |
title (opens in a new tab) | Title component, including main title and subtitle | object | undefined |
tooltip (opens in a new tab) | Tooltip component | object | undefined |
useUTC (opens in a new tab) | Whether to use UTC in display | object | undefined |
visualMap (opens in a new tab) | Component for visual encoding, which maps the data to visual channels | object | undefined |
xAxis (opens in a new tab) | The x axis in cartesian (rectangular) coordinate | object | undefined |
yAxis (opens in a new tab) | The y axis in cartesian (rectangular) coordinate | object | undefined |
events (opens in a new tab)
| Prop | Description | Type | Default |
|---|---|---|---|
onAxisAreaSelected (opens in a new tab) | Selecting event of range of parallel axis. | function | undefined |
onBrush (opens in a new tab) | Event triggered after action brush dispatched. | function | undefined |
onBrushEnd (opens in a new tab) | Event triggered after action brushEnd dispatched. | function | undefined |
onBrushSelected (opens in a new tab) | Notice what are selected. | function | undefined |
onClick (opens in a new tab) | Event of chart click. | function | undefined |
onContextMenu (opens in a new tab) | Event of context menu | function | undefined |
onDataRangeSelected (opens in a new tab) | Event emitted after range is changed in visualMap. | function | undefined |
onDataViewChanged (opens in a new tab) | Changing event of data view tool in toolbox. | function | undefined |
onDataZoom (opens in a new tab) | Event emitted after zooming data area. | function | undefined |
onDoubleClick (opens in a new tab) | Event of double chart click. | function | undefined |
onDownplay (opens in a new tab) | Event of data downplay. | function | undefined |
onFinished (opens in a new tab) | Triggered when render finished, that is, when animation finished | function | undefined |
onFocusNodeadJacency (opens in a new tab) | Adjacent nodes highlight event in graph. | function | undefined |
onGeoSelectChanged (opens in a new tab) | Event emitted after selecting state changes. | function | undefined |
onGeoSelected (opens in a new tab) | Event after selecting. | function | undefined |
onGeoUnselected (opens in a new tab) | Cancels selected event. | function | undefined |
onGlobalCursorTaken (opens in a new tab) | - | function | undefined |
onGlobalOut (opens in a new tab) | Event of global out chart | function | undefined |
onHighlight (opens in a new tab) | Event of data highlight. | function | undefined |
onLegendInverseSelect (opens in a new tab) | Event emitted after inversing all legends. | function | undefined |
onLegendScroll (opens in a new tab) | Event when trigger legend scroll. | function | undefined |
onLegendSelectAll (opens in a new tab) | Event emitted after all legends are selected. | function | undefined |
onLegendSelectChanged (opens in a new tab) | Event emitted after legend selecting state changes. | function | undefined |
onLegendSelected (opens in a new tab) | Event emitted after legend is selected. | function | undefined |
onLegendUnselected (opens in a new tab) | Event emitted after unselecting legend. | function | undefined |
onMagicTypeChanged (opens in a new tab) | Switching event of magic type tool in toolbox. | function | undefined |
onMouseDown (opens in a new tab) | Event of mouse down chart | function | undefined |
onMouseMove (opens in a new tab) | Event of mouse mouse chart | function | undefined |
onMouseOut (opens in a new tab) | Event of global out chart | function | undefined |
onMouseOver (opens in a new tab) | Event of mouse over chart | function | undefined |
onMouseUp (opens in a new tab) | Event of mouse up chart | function | undefined |
onRendered (opens in a new tab) | Trigger when a frame rendered. Notice that the rendered event does not indicate that the animation finished | function | undefined |
onRestore (opens in a new tab) | Resets option event. | function | undefined |
onSelectChanged (opens in a new tab) | Event emitted when data selection is changed. | function | undefined |
onTimelineChanged (opens in a new tab) | Event emitted after time point in timeline is changed. | function | undefined |
onTimelinePlayChanged (opens in a new tab) | Switching event of play state in timeline. | function | undefined |
onUnfocusNodeAdjacency (opens in a new tab) | Adjacent nodes reverse-highlight event in graph. | function | undefined |