FusionCharts - Reference Zone in Range Series Charts

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<!-- Reference Zone in Range Series charts -->
<div id="container">FusionCharts will render here</div>

JavaScript

data = [
        [2000, 60, 70],
        [2001, 55, 120],
        [2002, 31, 90],
        [2003, 21, 78],
        [2004, 67, 94],
        [2005, 12, 23],
        [2006, 60, 70],
        [2007, 21, 78],
        [2008, 49, 100],
        [2009, 53, 110],
        [2010, 42, 90],
        [2011, 29, 78],
        [2012, 41, 80],
        [2013, 11, 38],
        [2014, 37, 94],
        [2015, 10, 43],
        [2016, 69, 90],
        [2017, 41, 78],
        [2018, 39, 100],
        [2019, 43, 110],
        [2020, 52, 90],
        [2021, 59, 78]

      ],

      schema = [{
        "name": "Date",
        "type": "date",
        "format": "%Y"
      }, {
        "name": "Measure1",
        "type": "number"
      }, {
        "name": "Measure2",
        "type": "number"
      }],
    dataStore = new FusionCharts.DataStore();
   dataTable = dataStore.createDataTable(data, schema);

    var tchart = new FusionCharts({
      type: "timeseries",
      renderAt: "container",
      width: "100%",
      height: "400",
      dataSource: {
        "chart": {
          "animation": 0,
          theme: "fusion"

        },
        data: dataTable,
        "xAxis": {
          "plot": "Time",
          "title": "xAxisName",
        },
        "yaxis": [
          {
            "plot": {
              "value": {
                high: "Measure2",
                low: "Measure1"
              },
              "type": "area-range",
              "name": "area-range"
            },
            "referenceZone": [{
              "label": "Last Year Range",
              "valueMin": "50",
              "valueMax": "80"
            }]
          }
        ]
      }
    }).render();