You can easily customize the color of bars for different conditions like rising or falling values in Waterfall Chart. This visual distinction makes the graph more descriptive and easy to interpret. The given example shows a Waterfall Chart with customized colors for rising, falling and intermediate values. It also contains source code that you can edit in-browser or save to run locally.
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2", //"light1", "light2", "dark1", "dark2"
animationEnabled: true,
title:{
text: "Income Statement, 2016"
},
axisX:{
labelFontSize: 12,
labelMaxWidth: 70
},
axisY: {
prefix: "$"
},
data: [{
type: "waterfall",
yValueFormatString: "$#,##0",
risingColor: "#5B9BD5",
fallingColor: "#ED7D31",
lineColor: "#222222",
dataPoints: [
{ label: "Net Revenue", y: 240631 },
{ label: "Inventory", y: -115000 },
{ label: "Merchandise", y: -18900 },
{ label: "Other Sales Cost", y: -6990 },
{ label: "Gross Income", isIntermediateSum: true, color: "#C7C7C7" },
{ label: "Staff", y: -27500 },
{ label: "Marketing", y: -12000 },
{ label: "Other Facilities", y: -35100 },
{ label: "Operating Income", isCumulativeSum: true, color: "#C7C7C7" },
{ label: "Taxes", y: -4500 },
{ label: "Net Income", isCumulativeSum: true}
]
}]
});
chart.render();
}
You can change the color positive and negative values in the graph using risingColor and fallingColor property. You can also change lineThickness or lineColor to make it visually distinctive. Other frequent customization options include color, lineDashType, dataPointWidth, etc.