Search code examples
javascriptamcharts4

Draw a vertical line representing the current date in amcharts gantt chart?

*Draw a vertical line in Current month. here the sample code * https://codepen.io/anon/pen/PgELdM * and this is what I want to achieve * https://ibb.co/XjVn4WC

console.log("thank you");
Solution

  • You can use axis guides to draw single lines beneath the chart. E.g.

    var range = dateAxis.axisRanges.create();
range.date = new Date("2016-03-14");
range.grid.stroke = am4core.color("red");
range.grid.strokeWidth = 2;
range.grid.strokeOpacity = 1;

    Demo:

    https://codepen.io/team/amcharts/pen/bb11ebefe894ad526d4bd959fccccf08

    If you need a line on top of the various series, what you can do is make a full height line (y1, y2 at 0, not sure how to get the top of the chart value... says it only takes numbers meaning pixels, but maybe it can work with am4core.percent(100)?), for its x you'll have to convert date to a coordinate on the chart (the dateAxis will probably have methods for that), and place it in the chart.plotContainer.