Don't know how to implement range to amcharts

Question

i'm using the amcharts plugin to create nice charts. I found a couple of things to add ranges but the structure of the chart code is different then mine and i can't seem to find out how to implement it with my code. here is how i set up my graph.

var chartConfig = {
  "type": "serial",
  "theme": "none",
  "marginLeft": 70,
  "dataDateFormat": "YYYY-MM-DD",
  "graphs": [{
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "value"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "labelsEnabled": false,
    "tickLength": 0
  },
  "valueAxes": [{
    "ignoreAxisWidth": true
  }],

var charts = [];
charts.push(AmCharts.makeChart("chartdiv", chartConfig));
charts.push(AmCharts.makeChart("chartdiv2", chartConfig2));
charts.push(AmCharts.makeChart("chartdiv3", chartConfig3));

for (var x in charts) {
  charts[x].addListener("zoomed", syncZoom);
  charts[x].addListener("init", addCursorListeners);
}

function addCursorListeners(event) {
  event.chart.chartCursor.addListener("changed", handleCursorChange);
  event.chart.chartCursor.addListener("onHideCursor", handleHideCursor);
}

function syncZoom(event) {
  for (x in charts) {
    if (charts[x].ignoreZoom) {
      charts[x].ignoreZoom = false;
    }
    if (event.chart != charts[x]) {
      charts[x].ignoreZoom = true;
      charts[x].zoomToDates(event.startDate, event.endDate);
    }
  }
}

function handleCursorChange(event) {
  for (var x in charts) {
    if (event.chart != charts[x]) {
      charts[x].chartCursor.syncWithCursor(event.chart.chartCursor);
    }
  }
}

function handleHideCursor() {
  for (var x in charts) {
    if (charts[x].chartCursor.hideCursor) {
      charts[x].chartCursor.forceShow = false;
      charts[x].chartCursor.hideCursor(false);
    }
  }
}

Does somebody know how to implement the range in my case? thanks in advance!

Answer 1

Since you're on v3, I'm assuming you're referring to guides. Axis ranges are a v4 feature that can accomplish the same thing.

Guides can be added to the chart object by specifying a start/end point, fill, line color and optional text. If you're drawing a guide on the category axis, either use date/toDate or category/toCategory. If you're drawing a guide on a value axis, use value/toValue:

guides: [{
  //date-based category axis guide
  date: "2019-02-20", 
  toDate: "2019-02-22",
  fillAlpha: .20,
  fillColor: "#ee7d01",
  label: "Category Axis guide",
  inside: true //move label inside instead of displaying it on the axis
}, {
  //value axis guide
  value: 10,
  toValue: 30,
  fillAlpha: .20,
  fillColor: "#10d7ee",
  label: "Value Axis guide",
  inside: false //keep label outside along the axis
}]

Codepen