How to draw a vertical line using markline at specific X-axis value in a stacked bar graph

See original GitHub issue

Version

4.2.1

Reproduction link

https://jsfiddle.net/xko8cvy6/2/

Steps to reproduce

Open the reproduction link (https://jsfiddle.net/xko8cvy6/2/). image

It is not clear from the documentation about how to use the markline when Y-axis is of category type.

What is expected?

I tried using using bellow code but it produced a horizontal line

markLine: { data: [ {name: 'start', xAxis: 2000, yAxis: '0'}, {name: 'end', xAxis: 2000, yAxis: '1'}, ]

What is actually happening?

Vertical line from xAxis value 2000

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
pissangcommented, Aug 22, 2019

You can simply do it like:

markLine: {
   data: [ { name: 'xxxx', xAxis: 2000 } ]
}

Notice that in this case you don’t need two value to specify start point and end point.

1reaction
pissangcommented, Aug 21, 2019

markLine data should be 2d, Try

markLine: {
            data: [   [
              {name: 'start', xAxis: 2000, yAxis: 0},
              {name: 'end', xAxis: 2000, yAxis: 1},
            ]   ]
          }

But in your case, there is no ‘0’ in yAxis categories. So the markLine wont appear.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Echarts how do you add dashed vertical line in between ...
I've managed to achieve a similar effect to what you're looking for using the following option: I've converted your x-axis to be a...
Read more >
How to create vertical marker lines at specific x-axis values on ...
Copy the data in column F, select the chart, and paste. This adds a new stacked area with a peak where the lines...
Read more >
Add vertical line to Excel chart: scatter plot, bar ... - Ablebits
Learn how to make a vertical line interactive with a scroll bar. ... tip: Get x and y values for a specific data...
Read more >
Examples - Apache ECharts
Stacked Horizontal Bar. JS TS. Brush Select on Column Chart. JS TS. Bar Chart with Negative Value. JS TS. Rainfall and Evaporation. JS...
Read more >
Marks — Altair 4.2.0 documentation
image. mark_image(). A scatter plot with image markers. Image Mark. line ... The horizontal alignment of the text or ranged marks (area, bar,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found