Bar

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nabajeet Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Example of chart ignoring yAxisMaxValue value provided manually, because a data plot item exceeds that value. In this example, yAxisMaxValue is specified as 2000000, whereas there is a data item value (Q4) with value of 2120000. So, while calculating the chart limits, the chart ignores the manually specified yAxisMaxValue -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
     var myChart = new FusionCharts({
         "type": "stackedbar2d",
             "dataFormat": "json",
             "renderAt": "chart-container",
             "dataSource": {
             "chart": {
                 "caption": "Product-wise quarterly revenue in current year",
                     "subCaption": "Harry's SuperMart",
                     "xAxisname": "Quarter",
                     "yAxisName": "Revenue (In USD)",
                     "numberPrefix": "$",
                     "paletteColors": "#0075c2,#1aaf5d",
                     "bgColor": "#ffffff",
                     "borderAlpha": "20",
                     "showCanvasBorder": "0",
                     "usePlotGradientColor": "0",
                     "plotBorderAlpha": "10",
                     "legendBorderAlpha": "0",
                     "legendShadow": "0",
                     "valueFontColor": "#ffffff",
                     "showXAxisLine": "1",
                     "xAxisLineColor": "#999999",
                     "divlineColor": "#999999",
                     "divLineDashed": "1",
                     "showAlternateVGridColor": "0",
                     "subcaptionFontBold": "0",
                     "subcaptionFontSize": "14",
                     "showHoverEffect": "1"
             },
                 "trendlines": [{
                 "line": [{
                     "startvalue": "177500",
                         "color": "#00cc00",
                         "displayvalue": "Target",
                         "showOnTop": "1"
                 }]
             }],
                 "categories": [{
                 "category": [{
                     "label": "Q1"
                 }, {
                     "label": "Q2"
                 }, {
                     "label": "Q3"
                 }, {
                     "label": "Q4"
                 }]
             }],
                 "dataset": [{
                 "seriesname": "Food...