Apache ECharts 5.5.0 Features

Enhanced ESM Support

This feature is a significant change to the default ESM package, specifically designed for developer testing and Node.js usage in module customization scenarios.

Previously, ECharts only exported *.esm files in npm (in the lib directory of the npm package). While this worked well in bundlers, it didn’t perform as well in the Node.js runtime and some Node.js-based testing frameworks like vitest and jest.

With this new feature, we’ve made several changes to improve this:

Added "type": "module" to package.json
Added "exports": {...}" to package.json
Added some package.json files to the sub-directory, which only contain "type": "commonjs".

These changes mean that files like echarts/core.js can now be resolved as ESM in environments like pure Node.js, vitest, jest, and create-react-app.

We’ve also ensured that this new feature is compatible with a variety of environments, including runtime (node/vitest/jest(create-react-app)/ssr/…) and bundlers (webpack/rollup/vite/esbuild/…).

We’re excited about this new feature and believe it will significantly improve the developer experience.

Server-Side Rendering ＋ Lightweight Client Runtime

Apache ECharts is powerful, but correspondingly, it has a large package size. We have made various efforts to improve this in previous versions. Developers can use TreeShaking to load parts of the code as needed, reducing the amount of code loaded. Starting from Apache ECharts version 5.3, we support a server-side SVG string rendering solution with zero dependencies, and support the initial animation of charts. In this way, using the result of server-side rendering as the first screen rendering can greatly reduce the first screen loading time.

Although server-side rendering is an effective solution to reduce the package size, if some interactions need to be implemented on the client side, it is still necessary to load echarts.js, which may increase the loading time. For some scenarios that require faster page loading, this may not be an ideal choice.

In version 5.5.0, we added a lightweight runtime for the client side, so the client does not need to load the full ECharts to implement some interactions. In this way, we can render charts on the server side, and then load the lightweight runtime on the client side to implement some common interactions. This means that only 4KB of lightweight runtime (1KB after gzip) is needed to implement charts with initial animations and some commonly used interaction forms. This improvement will greatly increase the page loading speed, especially for the mobile experience.

Take this pie chart with a title as an example, if the client only packages the pie chart and title components, it needs 135KB after gzip; if it follows the server-side rendering solution, the rendering result SVG is 1 KB after gzip, and the client runtime is 1KB after gzip, only 1.5% of the former volume. In terms of interaction, the latter can also achieve initial animation, highlighting after the mouse moves to the chart element, and get click events, which can meet most of the common interaction needs.

If you need to use this solution, the server-side code remains the same, but you need to make sure that the ECharts version is above 5.5.0.

// Server-side code
const echarts = require('echarts');

// In SSR mode the first container parameter is not required
let chart = echarts.init(null, null, {
  renderer: 'svg', // must use SVG rendering mode
  ssr: true, // enable SSR
  width: 400, // need to specify height and width
  height: 300
});

// use setOption as normal
chart.setOption({
  //...
});

// Output a string
const svgStr = chart.renderToSVGString();

// Dispose it to release memory
chart.dispose();
chart = null;

// Response to the browser (using Express.js as example):
res.writeHead(200, {
  'Content-Type': 'application/xml'
});
res.write(svgStr);
res.end();

The client adds the obtained SVG string to the container and binds the lightweight runtime:

<div id="chart-container" style="width:800px;height:600px"></div>

<script src="https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.min.js"></script>
<script>
const ssrClient = window['echarts-ssr-client'];

let isSeriesShown = {
  a: true,
  b: true
};

function updateChart(svgStr) {
  const container = document.getElementById('chart-container');
  container.innerHTML = svgStr;

  // Use lightweight runtime to give the chart interactive capabilities
  ssrClient.hydrate(main, {
    on: {
      click: (params) => {
        if (params.ssrType === 'legend') {
          // Click the legend element, request the server for secondary rendering
          isSeriesShown[params.seriesName] = !isSeriesShown[params.seriesName];
          fetch('...?series=' + JSON.stringify(isSeriesShown))
            .then(res => res.text())
            .then(svgStr => {
              updateChart(svgStr);
            });
        }
      }
    }
  });
}

// Get the SVG string rendered by the server through AJAX request
fetch('...')
  .then(res => res.text())
  .then(svgStr => {
    updateChart(svgStr);
  });
</script>

The lightweight client runtime must be used in conjunction with the server-side rendering results in SVG format, supporting the following interactions:

Initial animation of the chart (implementation principle: the SVG rendered by the server has CSS animation)
Highlight style (implementation principle: the SVG rendered by the server has CSS animation)
Dynamically change data (implementation principle: the lightweight runtime requests the server for secondary rendering)
Click the legend to toggle whether the series is displayed (implementation principle: the lightweight runtime requests the server for secondary rendering)

As you can see, this can satisfy most interactive scenario needs. If more complex interactions are needed, the client needs to load echarts.js to implement complete functionality. For a complete introduction, please refer to Server-side Rendering ECharts Charts.

Data Drilldown Supports Transition Animation

In version 5.5.0, we added the childGroupId configuration item, which can realize the transition animation function of data drilldown.

In previous versions, we already support using groupId to represent the group to which the current data belongs. The newly added childGroupId can be used to express the group of the current data itself, forming a `parent-child-grandchild` relationship chain after being used in conjunction with groupId. When the user clicks on the data element in the chart, the chart will display the drilled down data in the form of transition animation.

Developers only need to specify groupId and childGroupId, and ECharts will automatically handle the hierarchical relationship and realize the transition animation.

Pie Chart Supports Gaps Between Sectors

By setting gaps between the sectors of the pie chart, the data blocks of the pie chart can be clearer and form unique visual effects. See (series-pie.padAngle).

Pie Chart and Polar Coordinate System Support End Angle

The end angle configuration item allows us to make incomplete pie charts such as semi-circles. See (series-pie.endAngle).

The polar coordinate system also supports the end angle, which can create more diverse polar coordinate charts. See (angleAxis.endAngle).

Added `min-max` Sampling Method

The ECharts sampling configuration item allows for setting the downsampling strategy for line charts when the amount of data is far greater than the number of pixels, which can effectively optimize the drawing efficiency of the chart. In version 5.5.0, we added the min-max sampling method, which can display the extremes of the data more accurately while retaining the overall trend of the data.

Added Two Languages: Arabic and Dutch

In version 5.5.0, we added support for two languages, Arabic (AR) and Dutch (NL). Developers can register new language packs through the echarts.registerLocale method.

In previous versions, the Tooltip could only be inserted into the chart container or document.body. Now, you can specify the container through tooltip.appendTo, so you can control the position of the tooltip more flexibly.

Alignment Mode of Maximum and Minimum Labels on Axis

In version 5.5.0, we added axisLabel.alignMinLabel and axisLabel.alignMaxLabel configuration items, which can control the alignment mode of the maximum and minimum labels on the axis. If the drawing area of the chart is relatively large and you don't want the axis label to overflow, you can align the maximum and minimum labels to the right and left, respectively.

Pictorial Bar Chart Supports Clipping

The pictorial bar chart may exceed the drawing area. If you want to avoid this, you can clip it through the series-pictorialBar.clip configuration item.

Added `dataIndex` Parameter For Tooltip `valueFormatter`

valueFormatter can be used to customize the value part of the tooltip content, and now an dataIndex parameter has been added, which can be used to obtain the index of the current data.