barRange

barRange is a custom series for Apache ECharts. It's typically used to display the range of data using bars.

Usage

Import the custom series JavaScript file and ECharts, then use echarts.use to install it.

<script src="./node_modules/echarts/dist/echarts.js"></script>
<script src="./dist/index.js"></script>
<script>
  echarts.use(window.barRangeCustomSeriesInstaller);
  const chart = echarts.init(...);
  // ...
</script>

Or, if using module bundler, install the package from npm and import it.

npm install @echarts/custom-bar-range

import echarts from 'echarts';
import barRangeCustomSeriesInstaller from '@echarts/custom-bar-range';

echarts.use(barRangeCustomSeriesInstaller);

See test for more details.

API

series.data

The data of the series is an array of arrays. Each sub-array represents a bar.

const data = [
  [0, 26.7, 32.5],
  [1, 25.3, 32.4],
];

The first element of the sub-array is the x value. The second and third elements are the lower and upper bounds of the bar.

series.itemPayload

The itemPayload is an object that contains the following properties:

series.encode

To make sure the value axis and tooltip take the correct range, encode should be set as follows:

encode: {
    x: 0,
    y: [1, 2],
    tooltip: [1, 2]
}

See test for more details.