Is markArea the right tool to show a vertical marker for a date using echarts?

Question

I'm trying to show when an event occurs, such as markArea, in echarts, but it doesn't seem right for this purpose. markArea is tied to a series, and the events I want to show are not linked to any specific series. Also, if the event's end date isn't visible, the markArea won't display. Here’s an example using markArea

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});

var option = {
  legend: {},
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (params) {
      var content = params[0].axisValueLabel + '<br/>';
      params.forEach(function (param) {
        content += '<div>' + param.marker + ' ' + param.seriesName + ':<b>' + param.data[param.seriesIndex + 1] + '</b></div>';
      });
      return content;
    }
  },
  dataset: {
    source: [["ctr","https://example.com/","https://example2.com/","https://example3.com/","https://example4.com/"],
     ['2024-03-25', 155, 3255, 0.04612405711754372, 28.97544937213972],
 ['2024-03-26', 147, 2646, 0.04014416177705469, 29.091804722834823],
 ['2024-03-27', 178, 3560, 0.040688706490536346, 27.53323982563269],
 ['2024-03-28', 110, 2090, 0.0482058988647373, 26.453705568958192],
 ['2024-03-29', 100, 1900, 0.04845121416967933, 26.636049713474687],
 ['2024-03-30', 148, 2664, 0.04763971319256993, 27.900573951909536],
 ['2024-03-31', 110, 2090, 0.047757525639329286, 28.03380646646396],
 ['2024-04-01', 115, 2415, 0.040976070412475626, 31.8957167077242],
 ['2024-04-02', 111, 2220, 0.04682326615299954, 31.327735377971138],
 ['2024-04-03', 106, 2332, 0.04007087767600365, 32.559933571054806],
 ['2024-04-04', 110, 2420, 0.04877346814059088, 33.01008580190097],
 ['2024-04-05', 123, 2460, 0.04691667471793927, 31.64774555925515],
 ['2024-04-06', 196, 3724, 0.0430943301316399, 30.587805441525653],
 ['2024-04-07', 176, 3520, 0.04999784682208863, 29.368827789624298],
 ['2024-04-08', 193, 4053, 0.04093812021799644, 29.443543034643312],
 ['2024-04-09', 105, 2205, 0.047200891570751656, 29.52253681004339],
 ['2024-04-10', 161, 3059, 0.043925835103226236, 27.967469590558423],
 ['2024-04-11', 162, 2916, 0.040197913652538636, 28.13384516506634],
 ['2024-04-12', 132, 2640, 0.040901628370328215, 28.505417884757836],
 ['2024-04-13', 190, 3610, 0.04691832905719355, 29.450593860149855]
      // Additional rows...
    ]
  },
  xAxis: {
    type: 'category',
    axisTick: {show: true},
    axisLabel: {show: true}
  },
    lineStyle: {
                width: 14,
            },
  yAxis: {},
  series: [
  
    { type: 'line', seriesLayoutBy: 'column'},
    {type: 'line', seriesLayoutBy: 'column'},
    { type: 'line', seriesLayoutBy: 'column'},
    {type: 'line', seriesLayoutBy: 'column', 
     markArea: {
        silent: true,
        itemStyle: {
          color: 'rgba(255, 233, 0, 0.4)', // Color for the first markArea
        },
        data: [[{
          name: 'Highlight Start',
          xAxis: '2024-03-25'
        }, {
          xAxis: '2024-03-26'
        }],
        [{
          name: 'Highlight Middle',
          xAxis: '2024-04-07',
          itemStyle: {
            color: 'rgba(0, 255, 0, 0.3)' // Different color for the second markArea
          }
        }, {
          xAxis: '2024-04-08'
        }]]
      }
    },
  ]
};

myChart.setOption(option);
window.addEventListener('resize', function() { myChart.resize(); });

Is there another element in echarts better suited for this, similar to createAxisRange in amcharts? Here's a link for reference amcharts example

Answer 1

markArea seems to be a good fit for this use case.

Note, that you can specify a series of type 'custom' containing only your markAreas. This way they are not connected to any other series.

Example:

option = {
  xAxis: {
    type: 'time',
  },
  yAxis: {
    type: 'value',
  },
  dataZoom: {type: 'inside'},
  series: [
    {
      type: 'line',
      smooth: true,
      data: Array.from(Array(20), (_, i) => [i * 1000, Math.random() * 100])
    },
    {
      type: 'custom',
      markArea: {
        itemStyle: {
          color: 'rgba(255, 173, 177, 0.4)'
        },
        data: [
          [
            {
              xAxis: 7345
            },
            {
              xAxis: 9234
            }
          ],
          [
            {
              xAxis: 14056
            },
            {
              xAxis: 'max'
            }
          ]
        ]
      }
    }
  ]
};

The markArea is displayed correctly even if it is partially out of the window.