FusionCharts - Configuring Caption/Sub-caption alignment and position in JavaScript charts

Created using FusionCharts Suite XT - www.fusioncharts.com

by Jithin Raj P R

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>
<!--
Configuring alignment and position of Caption/ Subcaption.
    # captionAlignment - Alignment of caption/sub-caption w.r.t chart area. Options are left, centre or right
    # captionOnTop - Whether to show caption/sub-caption above the canvas or below
    # alignCaptionWithCanvas - Align the caption with canvas, or chart area
    # captionHorizontalPadding - Inset spacing for caption.
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "%26quot Quarterly Revenue %26quot",
        "subCaption": "(Last year)",
        "rotateYAxisName": "0",
        "numberPrefix": "$",
        //Caption alignment attributes
        "alignCaptionWithCanvas": "1",
        "captionHorizontalPadding": "2",
        "captionOnTop": "0",
        "captionAlignment": "right",
        //Theme
        "theme": "fint"
      },
      "data": [{
          "label": "John&apos;s Score",
          "value": "1950000"
        },
        {
          "label": "%26quot Q2 %26quot",
          "value": "1450000"
        },
        {
          "label": "Q3",
          "value": "1730000"
        },
        {
          "label": "Q4",
          "value": "2120000"
        }
      ],
      "styles": {
    "definition": [
      {
        "name": "HTMLMode",
        "type": "font",
        "ishtml": "1"
      }
    ],
    "application": [
      {
        "toobject": "DATALABELS",
        "styles": "HTMLMode"
      }
    ]
  }
    }
  });

  revenueChart.render();
});