ECharts JSX

A real JSX wrapper for ECharts based on TypeScript & Web components

Features

• [x] All kinds of options & event handlers can be write in JSX syntax
• [x] Tree shaking supported based on ECMAScript 6+ modules

Versions

| SemVer | branch | status | component API | | :----: | :------: | :----------: | :------------: | | >=1 | main | ✅developing | Web components | | <1 | master | ❌deprecated | React |

Installation

Core package

npm i echarts-jsx

View renderer

Any kinds of Render engines that you like can be used to render ECharts JSX tags.

React 19+

Old versions have a property bug of Custom elements: https://github.com/facebook/react/issues/11347

npm i react@^19 react-dom@^19

Preact

npm i preact

then configure your tool-chain: https://preactjs.com/guide/v10/getting-started#integrating-into-an-existing-pipeline

and write chart codes as this demo: https://idea2app.github.io/React-MobX-Bootstrap-ts/#/chart

DOM Renderer v2 & WebCell v3

npm i dom-renderer@^2

then configure your project as the demo code.

Vue 3

npm create vite vue-echarts-app -- --template vue-ts

then configure your Vite as following code:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: tag => tag.startsWith('ec-')
                }
            }
        })
    ]
});

and write chart codes as this demo: https://idea2app.github.io/Vue-Prime-ts/#/chart

Simple example

Origin: ECharts official example

import { render } from 'react-dom';
import 'echarts-jsx';

render(
    <ec-svg-renderer theme="dark" style={{ width: '100%', height: '75vh' }}>
        <ec-title text="ECharts Getting Started Example" />

        <ec-legend data={['sales']} />

        <ec-tooltip />

        <ec-x-axis
            data={[
                'Shirts',
                'Cardigans',
                'Chiffons',
                'Pants',
                'Heels',
                'Socks'
            ]}
        />
        <ec-y-axis />

        <ec-bar-chart
            name="sales"
            data={[5, 20, 36, 10, 10, 20]}
            onClick={console.log}
        />
    </ec-svg-renderer>,
    document.body
);

Inspired by

1. https://recharts.org/
2. https://github.com/somonus/react-echarts
3. https://github.com/idea2app/ECharts-model
4. https://codesandbox.io/s/echarts-react-yoxstm

User cases

1. China Open-source Map