chartsbar-chartvisualizationechartsapache-echarts

How to add a dotted line on top of existing chart in Apache Echarts

I was tasked to implement a chart made by our design team,i took a look at the echarts cheatsheet and i couldnt find what i needed, i'm trying to implement this dotted line that represents the median value :

enter image description here

so far i arrived at this :

enter image description here

what is that vertical dotted called in Echarts ? can i extract the median value automatically based on my dataset source ?

Also how to add a label "Moyenne" which refers to that dotted line ?

This is my current options object :

const barColors: string[] = ["#5BA0B4", "#E6BE72", "#4C2E25", "#809D92", "#CCA0B9", "#75273B", "#E7728E", "#C6DDE4", "#9A7F4D", "#53645D", "#D1836E", "#79566A", "#D1DCD8", "#295765", "#E04F71", "#F3D5A1", "#A0604E"];
      const optionsBarCharthorizontal: EChartsOption = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ...(parseScenarios(data) || []),
          ]
        },
        xAxis: { type: 'value' },
        yAxis: {
          type: 'category',
          inverse: true,
        },
        series: [
          {
            type: 'bar',
            realtimeSort: true,
            itemStyle: {
              color: function (params) {
                return barColors[params.dataIndex];
              }
            }
          }
        ]
      }

Any help appreciated ! i'm new to data visualization in general and never used Echarts before.

Solution

  • Echart has feature to show line(markLine): EXAMPLE

    Also, Echart supports 'min', 'max', 'average', 'median' as a data type. for more info: click here