Draw horizontal target line using EChart.JS

Question

I would like to draw a horizontal target line showing threshold limits on a line, bar and pie chart using EChart.JS (https://ecomfe.github.io/echarts-doc/public/en/index.html).

There are other threads - "Chart.js - draw horizontal line" which detail how to do it with Chart.JS. Has anyone out there got particular experience on this with EChart?

Thanks in advance.

Answer 1

[Edit] Since Echarts v3 came up and was passed to the Apache Foundation, the documentation has been sclattered through different URLs, some options have gone away, some are not shown in all documentation resources, and so on. Links provided below have been updated (as of 24/02/2020) but might break again. I haven't fully tried v3 but provided code below should still work.[/Edit]

The option markLine is designed for that, see documentation here: https://echarts.apache.org/en/option.html#series-line.markLine

Note that there are different uses for it, and different options to provide, depending on what you want to draw:

• arbitrary line on the canvas (any size, any direction, any style)
• lines matching data caracteristics (min, max, average)
• horizontal/vertical lines

You have to use the attribute markLine.data in all cases, and description of specifics is described here: https://echarts.apache.org/en/option.html#series-line.markLine.data

Here's how I go, with a line curve on a time serie. Note that I couldn't get, within markLine.data[0], yAxis to be enough to draw a horizontal line: xAxis must be specified too (start and end points).

   xAxis:  {
       type: 'time',
   },
   yAxis: {
       type: 'value'
   },
   series: [{
    type: 'line',
    xAxisIndex: 0,
    yAxisIndex: 0,
    data: [
      [1509762600, 7.11376],
      [1509832800, 7.54459],
      [1509849000, 7.64559]
    ],
    markLine: {
      data: [
        // 1st line we want to draw
        [
          // start point of the line
          // we have to defined line attributes only here (not in the end point)
          {
            xAxis: 1509762600,
            yAxis: 3,
            symbol: 'none',
            lineStyle: {
              normal: {
                color: "#00F"
              }
            },
            label: {
              normal: {
                show: true,
                position: 'end',
                formatter: 'my label'
              }
            }
          },
          // end point of the line
          {
            xAxis: 1509849000,
            yAxis: 3,
            symbol: 'none'
          }
        ]
      ]
    }
  }]

Here's a fiddle I found: https://jsfiddle.net/381510688/hff93ska/

Note that ECharts really like to display markLines with arrow symbols in the end of it, hence my use of symbol: 'none' in above code, to have just the line drawn.