Customizing Charts - Customizing gradient fill for area chart

Created using FusionCharts Suite XT - www.fusioncharts.com

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>
<!-- 
You can use gradient fill data plots in the chart. Any number of colors can be defined to form a gradient in the specified ratio.

Attributes:
    1. usePlotGradientColor - Set to 1
    2. plotGradientColor (optional, FusionCharts by default will create a gradient if 'usePlotGradientColor' attribute is set to true)

Note: usePlotGradientColor attribute is set to 0 (false) in fint theme. The attribute is reset in the chart node.
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var salesChart = new FusionCharts({
    type: 'area2d',
    renderAt: 'chart-container',
    width: '600',
    height: '500',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Sales of liquor",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Sales (In USD)",
        "numberPrefix": "$",
        "theme": "fusion",
        "bgColor": "#000000",
        "showPlotBorder": "1",
        "plotBorderColor": "#FF0000",
        "plotBorderThickness": "3",
        "drawFullAreaBorder": "0",
        "usePlotGradientColor": "1",
        "plotGradientColor": "#FF0000",
        "plotFillColor": "#000000",
      },
      "data": [{
          "label": "Mon",
          "value": "4123",
        },
        {
          "label": "Tue",
          "value": "4633"
        },
        {
          "label": "Wed",
          "value": "5507"
        },
        {
          "label": "Thu",
          "value": "4910",
          "showValue":"1",
          "valueFontColor":"#FFFFFF",
          // add custom text
          "displayValue":"Custom Text",
          // customize individual data value to highlight 
          "anchorBgColor": "#FFFFFF",
          "anchorRadius":"20",
         	"anchorBorderColor":"#FFFFFF",
          "anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/1.png"
        },
        {
          "label": "Fri",
          "value": "5529"
        },
        {
          "label": "Sat",
          "value": "5803"
        },
        {
          "label": "Sun",
          "value": "6202"
        }
      ]
    }
  }).render();
});