FusionCharts - Configuration of Zero Plane in JavaScript charts

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!-- 
Zero Plane shows up on the chart when the chart has a mix of positive and negative values.

Attributes: 
    # showZeroPlane - By default, 1. 
    # zeroPlaneColor
    # zeroPlaneAlpha
    # zeroPlaneThickness

 -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var wVstrsChart = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Website Visitors WoW Growth",
        "subcaption": "Last 10 weeks",
        "xAxisName": "Week",
        "yAxisName": "Growth",
        "numberSuffix": "%",
        "theme": "fusion",
        "showValues": "0",
        //Show Zero plane
        "showZeroPlane": "1",
        //Customize Zero Plane Properties 
        "zeroPlaneColor": "#003366",
        "zeroPlaneAlpha": "100",
        "zeroPlaneThickness": "3",
        "divLineIsDashed": "0",
        "divLineAlpha": "40"
      },
      "data": [{
          "label": "Week 1",
          "value": "14.5"
        },
        {
          "label": "Week 2",
          "value": "-6.5"
        },
        {
          "label": "Week 3",
          "value": "9.8"
        },
        {
          "label": "Week 4",
          "value": "9.2"
        },
        {
          "label": "Week 5",
          "value": "-7.45"
        },
        {
          "label": "Week 6",
          "value": "-3.19"
        },
        {
          "label": "Week 7",
          "value": "-11.78"
        },
        {
          "label": "Week 8",
          "value": "3.32"
        },
        {
          "label": "Week 9",
          "value": "8.57"
        },
        {
          "label": "Week 10",
          "value": "16.95"
        }
      ]
    }
  }).render();
});