ECharts - Unable to create a vertical marker line on time axis (xAxis)

Question

Unable to add vertical marker's to xAxis when the axis type is "time". I wanted to add markers which represents events in the time axis on different dates.

Sample which I tried, https://jsfiddle.net/msbasanth/ez3cgm5d/3/

When I have xAxis type as 'category' or 'value' I am able to add the marker line without an issue. This is how I set markerLine in xAxis.

 xAxis: {
          type: "time",
          axisTick: {
            show: false,
          },
          markLine: {
            data: [
     [
        {
            name: 'Mark line between two points',
            x: 100,
            y: 100
        },
        {
            x: 500,
            y: 200
        }
    ]
],
          }
        }

https://jsfiddle.net/msbasanth/2g614wzu/

Here in this sample I could see markers added to xAxis (type: "time") but looks complex and I could sees they have an approximation of time axis. Do we have a direct way for setting marker in time xAxis on specified date values?

Answer 1

Markline in echarts is not bound to axis, it is bound to series.

With xaxis type as time you can create vertical markLines by specifying the xAxis value as date string in markline configuration.

Refer the below code, to achieve vertical marklines

 series: [
      {
        data: data,
        type: "line",
        markLine: {
          data: [
          [
            { name: "Imp Day 01", xAxis: '1998-01-01',yAxis: 0  },
            { name: "end", xAxis: '1998-01-01',  yAxis:'max' },
          ],
          [
            { name: "Imp Day 02", xAxis: '1998-08-01', yAxis: 0 },
            { name: "end", xAxis: '1998-08-01', yAxis:'max' },
          ]
          ],
        },
        lineStyle: {
          color: "rgba(242, 145, 72, 1)",
        },
      },
    ]