How to create a boxplot diagram with Echart 5.5.0

Question

I need to implement a scale diagram like the one shown in the following chart.

I have tried to create this scale hart with boxplot with Echarts 5.5.0.

Here the code : https://codesandbox.io/p/sandbox/error-bar-on-catesian-v9vmmk?file=%2Findex.js

However I have not been able to define and complete my diagram.

Any ideas?

Thank you very much in advance.

Ben

Answer 1

To simplify the example, I used fixed values instead of generating a random value.

In your example, you associated the categories with the X axis. If you want to create a horizontal chart, you should associate them with the Y axis instead.

You can use api.coord() to calculate the position of values from to. Here, the value of the X and Y axes must be entered in the opposite way.

With these two modifications we have the horizontal diagram. Since you didn't provide any more information, I can only assume that was the intent.

There is an extra middle line called Mid Value placed on the photo for you on the chart. For this, you just need to take the average of the maximum and minimum values. I increased the height of the line and doubled its thickness.

/**
 ** Initialize
 */
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom);

/**
 ** Data
 */
const categoryData = ['category0', 'category1', 'category2', 'category3', 'category4'];
const barData = [30, 50, 70, 60, 80];
const errorData = [
  ['category0', 10, 40],
  ['category1', 30, 60],
  ['category2', 50, 80],
  ['category3', 40, 70],
  ['category4', 60, 90]
];

/**
 ** Option
 */
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  title: {
    text: 'Horizontal Boxplot'
  },
  legend: {
    data: ['bar', 'error']
  },
  yAxis: {
    type: 'category',
    data: categoryData
  },
  xAxis: {},
  series: [
    {
      type: 'bar',
      name: 'bar',
      data: barData,
      itemStyle: {
        color: '#cce0ff'
      }
    },
    {
      type: 'custom',
      name: 'error',
      itemStyle: {
        borderWidth: 1.5
      },
      renderItem: function (params, api) {
        const yValue = api.value(0);
        
        const lowPoint = api.coord([api.value(1), yValue]);
        const midPoint = api.coord([(api.value(1) + api.value(2)) / 2, yValue]);
        const highPoint = api.coord([api.value(2), yValue]);
        
        const halfHeight = api.size([1, 1])[1] * 0.1;
        
        const style = api.style({
          stroke: api.visual('color'),
          fill: undefined
        });
        return {
          type: 'group',
          children: [
            // Line
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: lowPoint[0],
                y1: lowPoint[1],
                x2: highPoint[0],
                y2: highPoint[1]
              },
              style: style
            },
            // Low Value
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: lowPoint[0],
                y1: lowPoint[1] - halfHeight,
                x2: lowPoint[0],
                y2: lowPoint[1] + halfHeight
              },
              style: style
            },
            // Mid Value
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: midPoint[0],
                y1: midPoint[1] - halfHeight * 2,
                x2: midPoint[0],
                y2: midPoint[1] + halfHeight * 2
              },
              style: {...style, lineWidth: style.lineWidth * 2}
            },
            // High Value
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: highPoint[0],
                y1: highPoint[1] - halfHeight,
                x2: highPoint[0],
                y2: highPoint[1] + halfHeight
              },
              style: style
            }
          ]
        };
      },
      encode: {
        x: [1, 2],
        y: 0
      },
      data: errorData,
      z: 100
    }
  ]
};

/**
 ** Render Chart
 */
chart.setOption(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js" integrity="sha512-k37wQcV4v2h6jgYf5IUz1MoSKPpDs630XGSmCaCCOXxy2awgAWKHGZWr9nMyGgk3IOxA1NxdkN8r1JHgkUtMoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="chart" style="width: 650px; height: 250px;"></div>