FusionCharts - Vertical Zero Plane in charts with numeric x-axis

Showing only specific data values of a chart

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>
<!--
In charts with numeric x-axis (XY Plot or Scatter, Bubble), you can display Vertical Zero Plane in a chart.
    Attributes:
        # showVZeroPlane
        # vZeroPlaneColor
        # vZeroPlaneAlpha
        # vZeroPlaneThickness
 -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var profitChart = new FusionCharts({
    type: 'scatter',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Old Stock Clearance",
        "subcaption": "Price Vs Profit",
        "yaxisname": "Price (In USD)",
        "xaxisname": "Profit (In %)",
        "xaxismaxvalue": "40",
        "xaxisminvalue": "-20",
        "yaxismaxvalue": "1000",
        "xnumbersuffix": "%",
        "ynumberprefix": "$",

        //Vertical zero plane          
        "showVZeroPlane": "0",
        "vZeroPlaneColor": "#cc3300",
        "vZeroPlaneThickness": "3",
        "vZeroPlaneAlpha": "90",

        //Theme
        "theme": "fint"
      },
      "dataset": [{
          "drawline": "0",
          "seriesname": "Televisions",
          "color": "#6baa01",
          "anchorsides": "3",
          "anchorradius": "4",
          "anchorbgcolor": "#6baa01",
          "anchorbordercolor": "#6baa01",
          "data": [{
              "id": "TV_1",
              "x": "-9.89",
              "y": "642"
            },
            {
              "id": "TV_2",
              "x": "21.59",
              "y": "947"
            },
            {
              "id": "TV_3",
              "x": "-8.8",
              "y": "433"
            },
            {
              "id": "TV_4",
              "x": "-10.88",
              "y": "750"
            },
            {
              "id": "TV_5",
              "x": "5.43",
              "y": "593"
            },
            {
              "id": "TV_6",
              "x": "23.76",
              "y": "426"
            },
            {
              "id": "TV_7",
              "x": "17.74",
              "y": "575"
            }, {
              "id": "TV_8",
              "x": "8.71",
              "y": "962"
            },
            {
              "id": "TV_9",
             ...