CODEWITHSUNDEEP
javascriptamcharts
Lorelie
Lorelie

Reputation: 23

Amchart 4 axis range

please help me. I'd like the axis ranges with their to repeated in a period for instance in this example the axis ranges just displayed once if there is only one start and end date for each ranges:

https://www.amcharts.com/demos/stacked-area/

but what if there are multiple start date and end date for each axis range? is it possible to display them? for instance:

This code isn't working. I have 2 axis ranges test a and test b.

function createRange(axis, from, to, title) {
  var range = axis.axisRanges.create();
  range.value = from;
  range.endValue = to;
  range.grid.stroke = chart.colors.getIndex(7);
  range.grid.strokeOpacity = 0.6;
  range.grid.strokeDasharray = "5,2";
  range.label.text =  title;
  range.label.inside = true;
  range.label.rotation = 90;
  range.label.horizontalCenter = "right";
  range.label.verticalCenter = "middle";
}

createRange(dateAxis, new Date(Date.parse(testa_start)), new Date(Date.parse(testa_end)), "Test A");
createRange(dateAxis, new Date(Date.parse(testb_start)), new Date(Date.parse(testb_end)), "Test B");

Please help. appreciate it very much. Thanks

Upvotes: 0

Views: 854

Answers (1)

Samuel Philipp
Samuel Philipp

Reputation: 11040

You should set range.date instead of range.value.

See that full working code pen with the fixed function.

function createRange(axis, from, to, title) {
    var range = axis.axisRanges.create();
    range.date = from;
    range.endValue = to;
    range.grid.stroke = chart.colors.getIndex(7);
    range.grid.strokeOpacity = 0.6;
    range.grid.strokeDasharray = "5,2";
    range.axisFill.fill = chart.colors.getIndex(7);
    range.axisFill.fillOpacity = 0.2;
    range.label.text =  title;
    range.label.inside = true;
    range.label.rotation = 90;
    range.label.horizontalCenter = "right";
    range.label.verticalCenter = "middle";
}

createRange(dateAxis, new Date(2005, 1, 1), new Date(2007, 1, 1), 'Test');

Upvotes: 1

Related Questions