Customizing Charts - Customizing Legend Scroll bar cosmetics.

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>
<!-- If the legend has a large number of keys to display, it shows a scroll bar for easy navigation. You can customize the cosmetics of the scroll bar using these attributes:
Attributes: 
    # legendScrollBgColor
    # legendScrollBarColor
    
    Or, you can define the number of rows and columns the legend items should take to accomodate without using the scroll bar
Attributes: 
  # legendNumRows
  # legendNumColumns
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'pie2d',
    renderAt: 'chart-container',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Letters Used in a Novel",
        "formatnumberscale": "0",
        "showBorder": "0",
        "showLegend": "1",
        "showPercentValues": "1",
        "showPercentInToolTip": "0",
        //Setting legend to appear on right side
        "legendPosition": "bottom",
        //Caption for legend
        "legendCaption": "Alphabet Used: ",
        //Customization for legend scroll bar cosmetics
        "legendScrollBgColor": "#000",
        "legendScrollBarColor": "#999999",
        // Set number of columns for the legend items
        //"legendNumRows": "1", // scroll bar appears
        "legendNumColumns": "4", // scroll bar is removed
        "legendNumRows": "5" // scroll bar is removed
      },
      "data": [{
        "label": "Legend 1",
        "value": "91852"
      }, {
        "label": "Legend 2",
        "value": "51852"
      }, {
        "label": "Legend 3",
        "value": "88168"
      }, {
        "label": "Legend 4",
        "value": "73897"
      }, {
        "label": "Legend 5",
        "value": "93933"
      }, {
        "label": "Legend 6",
        "value": "19289"
      }, {
        "label": "Legend 7",
        "value": "79623"
      }, {
        "label": "Legend 8",
        "value": "48262"
      }, {
        "label": "Legend 9",
        "value": "29162"
      }, {
        "label": "Legend 10",
        "value": "96878"
      }, {
        "label": "Legend 11",
        "value": "81241"
      }, {
        "label": "Legend 12",
        "value": "40652",
      }, {
        "label": "Legend 13",
        "value": "37581",
      }, {
        "label": "Legend 14",
        "value": "2882"
      }, {
        "label": "Legend 15",
        "value": "746"
      }, {
        "label":...