FusionCharts - Configuring connector lines in Waterfall Chart
Created using FusionCharts Suite XT - www.fusioncharts.com
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>
<!--
Configuring connector linea in Waterfall 2D chart.
Attributes :
# showConnectors - Set to 1,
# connectorColor - Set to #660000,
# connectorAlpha - Set to 50,
# connectorThickness - Set to 3,
# connectorDashed - Set to 1,
# connectorDashLen - Set to 5,
# connectorDashLen - Set to 5
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var BAChart = new FusionCharts({
type: 'waterfall2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Total Profit Calculation",
"subcaption": "Last month",
"yAxisname": "Amount (In USD)",
"numberprefix": "$",
"sumlabel": "Total {br} Profit",
"theme": "fusion",
//Connector lines configuration
"showConnectors": "1",
"connectorColor": "#660000",
"connectorAlpha": "50",
"connectorThickness": "3",
"connectorDashed": "1",
"connectorDashLen": "5",
"connectorDashLen": "5",
},
"data": [{
"label": "Online sales",
"value": "420000"
},
{
"label": "Store Sales",
"value": "710000"
},
{
"label": "Total Sales",
"issum": "1"
},
{
"label": "Fixed Costs",
"value": "-250000"
},
{
"label": "Variable Costs",
"value": "-156000"
},
{
"label": "COGS",
"value": "-310000"
},
{
"label": "Promotion Costs",
"value": "-86000"
},
{
"label": "Total Costs",
"issum": "1",
"cumulative": "0"
}
]
}
}).render();
});