ChartDirector 6.2 (.NET Edition)

Pos/Neg Waterfall Chart




This example demonstrates a waterfall chart with positive and negative data shown in different colors.

This chart is created as a box-whisker layer using XYChart.addBoxWhiskerLayer. Only the "box" part of the box-whisker layer is used.

The top-edges of the boxes are obtained by accumulating the raw data using the ArrayMath utility. The bottom-edges of the boxes are simply the top-edges of previous boxes, with the exception of the last "total" box which always starts at 0.

The color for each box is set using BoxWhiskerLayer.setBoxColor, in which the color depends on whether the top-edge is above or below the bottom-edge (that is, whether the data is positive or negative).

Source Code Listing

[Windows Forms - C# version] NetWinCharts\CSharpWinCharts\posnegwaterfall.cs
using System;
using ChartDirector;

namespace CSharpChartExplorer
{
    public class posnegwaterfall : DemoModule
    {
        //Name of demo module
        public string getName() { return "Pos/Neg Waterfall Chart"; }

        //Number of charts produced in this demo module
        public int getNoOfCharts() { return 1; }

        //Main code for creating chart.
        //Note: the argument chartIndex is unused because this demo only has 1 chart.
        public void createChart(WinChartViewer viewer, int chartIndex)
        {
            // 4 data points to represent the cash flow for the Q1 - Q4
            double[] data = {230, -140, 220, 330};

            // We want to plot a waterfall chart showing the 4 quarters as well as the total
            string[] labels = {"1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter", "Total"};

            // The top side of the bars in a waterfall chart is the accumulated data. We use the
            // ChartDirector ArrayMath utility to accumulate the data. The "total" is handled by
            // inserting a zero point at the end before accumulation (after accumulation it will
            // become the total).
            double[] boxTop = new ArrayMath(data).insert2(0, 1, data.Length).acc().result();

            // The botom side of the bars is just the top side of the previous bar. So we shifted
            // the top side data to obtain the bottom side data.
            double[] boxBottom = new ArrayMath(boxTop).shift(1, 0).result();

            // The last point (total) is different. Its bottom side is always 0.
            boxBottom[boxBottom.Length - 1] = 0;

            // In this example, we want to use different colors depending on the data is positive or
            // negative.
            int posColor = 0x00ff00;
            int negColor = 0xff0000;

            // Create a XYChart object of size 500 x 280 pixels. Set background color to light blue
            // (ccccff), with 1 pixel 3D border effect.
            XYChart c = new XYChart(500, 300, 0xccccff, 0x000000, 1);

            // Add a title to the chart using 13 points Arial Bold Itatic font, with white (ffffff)
            // text on a deep blue (0x80) background
            c.addTitle("Corporate Cash Flow - Year 2004", "Arial Bold Italic", 13, 0xffffff
                ).setBackground(0x000080);

            // Set the plotarea at (55, 50) and of size 430 x 215 pixels. Use alternative white/grey
            // background.
            c.setPlotArea(55, 50, 430, 215, 0xffffff, 0xeeeeee);

            // Add a legend box at (55, 25) using 8pt Arial Bold font with horizontal layout, with
            // transparent background and border color.
            LegendBox b = c.addLegend(55, 25, false, "Arial Bold", 8);
            b.setBackground(Chart.Transparent, Chart.Transparent);

            // Add keys to show the colors for positive and negative cash flows
            b.addKey("Positive Cash Flow", posColor);
            b.addKey("Negative Cash Flow", negColor);

            // Set the labels on the x axis using Arial Bold font
            c.xAxis().setLabels(labels).setFontStyle("Arial Bold");

            // Set the x-axis ticks and grid lines to be between the bars
            c.xAxis().setTickOffset(0.5);

            // Use Arial Bold as the y axis label font
            c.yAxis().setLabelStyle("Arial Bold");

            // Add a title to the y axis
            c.yAxis().setTitle("USD (in millions)");

            // Add a box-whisker layer to represent the waterfall bars
            BoxWhiskerLayer layer = c.addBoxWhiskerLayer(boxTop, boxBottom);

            // Color the bars depending on whether it is positive or negative
            for(int i = 0; i < boxTop.Length; ++i) {
                if (boxTop[i] >= boxBottom[i]) {
                    layer.setBoxColor(i, posColor);
                } else {
                    layer.setBoxColor(i, negColor);
                }
            }

            // Put data labels on the bars to show the cash flow using Arial Bold font
            layer.setDataLabelFormat("{={top}-{bottom}}M");
            layer.setDataLabelStyle("Arial Bold").setAlignment(Chart.Center);

            // Output the chart
            viewer.Chart = c;

            //include tool tip for the chart
            viewer.ImageMap = c.getHTMLImageMap("clickable", "",
                "title='{xLabel}: {={top}-{bottom}} millions'");
        }
    }
}

[Windows Forms - VB Version] NetWinCharts\VBNetWinCharts\posnegwaterfall.vb
Imports System
Imports Microsoft.VisualBasic
Imports ChartDirector

Public Class posnegwaterfall
    Implements DemoModule

    'Name of demo module
    Public Function getName() As String Implements DemoModule.getName
        Return "Pos/Neg Waterfall Chart"
    End Function

    'Number of charts produced in this demo module
    Public Function getNoOfCharts() As Integer Implements DemoModule.getNoOfCharts
        Return 1
    End Function

    'Main code for creating chart.
    'Note: the argument chartIndex is unused because this demo only has 1 chart.
    Public Sub createChart(viewer As WinChartViewer, chartIndex As Integer) _
        Implements DemoModule.createChart

        ' 4 data points to represent the cash flow for the Q1 - Q4
        Dim data() As Double = {230, -140, 220, 330}

        ' We want to plot a waterfall chart showing the 4 quarters as well as the total
        Dim labels() As String = {"1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter", _
            "Total"}

        ' The top side of the bars in a waterfall chart is the accumulated data. We use the
        ' ChartDirector ArrayMath utility to accumulate the data. The "total" is handled by
        ' inserting a zero point at the end before accumulation (after accumulation it will become
        ' the total).
        Dim boxTop() As Double = New ArrayMath(data).insert2(0, 1, UBound(data) + 1).acc().result()

        ' The botom side of the bars is just the top side of the previous bar. So we shifted the top
        ' side data to obtain the bottom side data.
        Dim boxBottom() As Double = New ArrayMath(boxTop).shift(1, 0).result()

        ' The last point (total) is different. Its bottom side is always 0.
        boxBottom(UBound(boxBottom)) = 0

        ' In this example, we want to use different colors depending on the data is positive or
        ' negative.
        Dim posColor As Integer = &H00ff00
        Dim negColor As Integer = &Hff0000

        ' Create a XYChart object of size 500 x 280 pixels. Set background color to light blue
        ' (ccccff), with 1 pixel 3D border effect.
        Dim c As XYChart = New XYChart(500, 300, &Hccccff, &H000000, 1)

        ' Add a title to the chart using 13 points Arial Bold Itatic font, with white (ffffff) text
        ' on a deep blue (0x80) background
        c.addTitle("Corporate Cash Flow - Year 2004", "Arial Bold Italic", 13, &Hffffff _
            ).setBackground(&H000080)

        ' Set the plotarea at (55, 50) and of size 430 x 215 pixels. Use alternative white/grey
        ' background.
        c.setPlotArea(55, 50, 430, 215, &Hffffff, &Heeeeee)

        ' Add a legend box at (55, 25) using 8pt Arial Bold font with horizontal layout, with
        ' transparent background and border color.
        Dim b As LegendBox = c.addLegend(55, 25, False, "Arial Bold", 8)
        b.setBackground(Chart.Transparent, Chart.Transparent)

        ' Add keys to show the colors for positive and negative cash flows
        b.addKey("Positive Cash Flow", posColor)
        b.addKey("Negative Cash Flow", negColor)

        ' Set the labels on the x axis using Arial Bold font
        c.xAxis().setLabels(labels).setFontStyle("Arial Bold")

        ' Set the x-axis ticks and grid lines to be between the bars
        c.xAxis().setTickOffset(0.5)

        ' Use Arial Bold as the y axis label font
        c.yAxis().setLabelStyle("Arial Bold")

        ' Add a title to the y axis
        c.yAxis().setTitle("USD (in millions)")

        ' Add a box-whisker layer to represent the waterfall bars
        Dim layer As BoxWhiskerLayer = c.addBoxWhiskerLayer(boxTop, boxBottom)

        ' Color the bars depending on whether it is positive or negative
        For i As Integer = 0 To UBound(boxTop)
            If boxTop(i) >= boxBottom(i) Then
                layer.setBoxColor(i, posColor)
            Else
                layer.setBoxColor(i, negColor)
            End If
        Next

        ' Put data labels on the bars to show the cash flow using Arial Bold font
        layer.setDataLabelFormat("{={top}-{bottom}}M")
        layer.setDataLabelStyle("Arial Bold").setAlignment(Chart.Center)

        ' Output the chart
        viewer.Chart = c

        'include tool tip for the chart
        viewer.ImageMap = c.getHTMLImageMap("clickable", "", _
            "title='{xLabel}: {={top}-{bottom}} millions'")

    End Sub

End Class

[WPF - C#] NetWPFCharts\posnegwaterfall.cs
using System;
using ChartDirector;

namespace CSharpWPFDemo
{
    public class posnegwaterfall : DemoModule
    {
        //Name of demo module
        public string getName() { return "Pos/Neg Waterfall Chart"; }

        //Number of charts produced in this demo module
        public int getNoOfCharts() { return 1; }

        //Main code for creating chart.
        //Note: the argument chartIndex is unused because this demo only has 1 chart.
        public void createChart(WPFChartViewer viewer, int chartIndex)
        {
            // 4 data points to represent the cash flow for the Q1 - Q4
            double[] data = {230, -140, 220, 330};

            // We want to plot a waterfall chart showing the 4 quarters as well as the total
            string[] labels = {"1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter", "Total"};

            // The top side of the bars in a waterfall chart is the accumulated data. We use the
            // ChartDirector ArrayMath utility to accumulate the data. The "total" is handled by
            // inserting a zero point at the end before accumulation (after accumulation it will
            // become the total).
            double[] boxTop = new ArrayMath(data).insert2(0, 1, data.Length).acc().result();

            // The botom side of the bars is just the top side of the previous bar. So we shifted
            // the top side data to obtain the bottom side data.
            double[] boxBottom = new ArrayMath(boxTop).shift(1, 0).result();

            // The last point (total) is different. Its bottom side is always 0.
            boxBottom[boxBottom.Length - 1] = 0;

            // In this example, we want to use different colors depending on the data is positive or
            // negative.
            int posColor = 0x00ff00;
            int negColor = 0xff0000;

            // Create a XYChart object of size 500 x 280 pixels. Set background color to light blue
            // (ccccff), with 1 pixel 3D border effect.
            XYChart c = new XYChart(500, 300, 0xccccff, 0x000000, 1);

            // Add a title to the chart using 13 points Arial Bold Itatic font, with white (ffffff)
            // text on a deep blue (0x80) background
            c.addTitle("Corporate Cash Flow - Year 2004", "Arial Bold Italic", 13, 0xffffff
                ).setBackground(0x000080);

            // Set the plotarea at (55, 50) and of size 430 x 215 pixels. Use alternative white/grey
            // background.
            c.setPlotArea(55, 50, 430, 215, 0xffffff, 0xeeeeee);

            // Add a legend box at (55, 25) using 8pt Arial Bold font with horizontal layout, with
            // transparent background and border color.
            LegendBox b = c.addLegend(55, 25, false, "Arial Bold", 8);
            b.setBackground(Chart.Transparent, Chart.Transparent);

            // Add keys to show the colors for positive and negative cash flows
            b.addKey("Positive Cash Flow", posColor);
            b.addKey("Negative Cash Flow", negColor);

            // Set the labels on the x axis using Arial Bold font
            c.xAxis().setLabels(labels).setFontStyle("Arial Bold");

            // Set the x-axis ticks and grid lines to be between the bars
            c.xAxis().setTickOffset(0.5);

            // Use Arial Bold as the y axis label font
            c.yAxis().setLabelStyle("Arial Bold");

            // Add a title to the y axis
            c.yAxis().setTitle("USD (in millions)");

            // Add a box-whisker layer to represent the waterfall bars
            BoxWhiskerLayer layer = c.addBoxWhiskerLayer(boxTop, boxBottom);

            // Color the bars depending on whether it is positive or negative
            for(int i = 0; i < boxTop.Length; ++i) {
                if (boxTop[i] >= boxBottom[i]) {
                    layer.setBoxColor(i, posColor);
                } else {
                    layer.setBoxColor(i, negColor);
                }
            }

            // Put data labels on the bars to show the cash flow using Arial Bold font
            layer.setDataLabelFormat("{={top}-{bottom}}M");
            layer.setDataLabelStyle("Arial Bold").setAlignment(Chart.Center);

            // Output the chart
            viewer.Chart = c;

            //include tool tip for the chart
            viewer.ImageMap = c.getHTMLImageMap("clickable", "",
                "title='{xLabel}: {={top}-{bottom}} millions'");
        }
    }
}

[ASP.NET Web Forms - C# version] NetWebCharts\CSharpASP\posnegwaterfall.aspx
(Click here on how to convert this code to code-behind style.)
<%@ Page Language="C#" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %>

<!DOCTYPE html>

<script runat="server">

//
// Page Load event handler
//
protected void Page_Load(object sender, EventArgs e)
{
    // 4 data points to represent the cash flow for the Q1 - Q4
    double[] data = {230, -140, 220, 330};

    // We want to plot a waterfall chart showing the 4 quarters as well as the total
    string[] labels = {"1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter", "Total"};

    // The top side of the bars in a waterfall chart is the accumulated data. We use the
    // ChartDirector ArrayMath utility to accumulate the data. The "total" is handled by inserting a
    // zero point at the end before accumulation (after accumulation it will become the total).
    double[] boxTop = new ArrayMath(data).insert2(0, 1, data.Length).acc().result();

    // The botom side of the bars is just the top side of the previous bar. So we shifted the top
    // side data to obtain the bottom side data.
    double[] boxBottom = new ArrayMath(boxTop).shift(1, 0).result();

    // The last point (total) is different. Its bottom side is always 0.
    boxBottom[boxBottom.Length - 1] = 0;

    // In this example, we want to use different colors depending on the data is positive or
    // negative.
    int posColor = 0x00ff00;
    int negColor = 0xff0000;

    // Create a XYChart object of size 500 x 280 pixels. Set background color to light blue
    // (ccccff), with 1 pixel 3D border effect.
    XYChart c = new XYChart(500, 300, 0xccccff, 0x000000, 1);

    // Add a title to the chart using 13 points Arial Bold Itatic font, with white (ffffff) text on
    // a deep blue (0x80) background
    c.addTitle("Corporate Cash Flow - Year 2004", "Arial Bold Italic", 13, 0xffffff).setBackground(
        0x000080);

    // Set the plotarea at (55, 50) and of size 430 x 215 pixels. Use alternative white/grey
    // background.
    c.setPlotArea(55, 50, 430, 215, 0xffffff, 0xeeeeee);

    // Add a legend box at (55, 25) using 8pt Arial Bold font with horizontal layout, with
    // transparent background and border color.
    LegendBox b = c.addLegend(55, 25, false, "Arial Bold", 8);
    b.setBackground(Chart.Transparent, Chart.Transparent);

    // Add keys to show the colors for positive and negative cash flows
    b.addKey("Positive Cash Flow", posColor);
    b.addKey("Negative Cash Flow", negColor);

    // Set the labels on the x axis using Arial Bold font
    c.xAxis().setLabels(labels).setFontStyle("Arial Bold");

    // Set the x-axis ticks and grid lines to be between the bars
    c.xAxis().setTickOffset(0.5);

    // Use Arial Bold as the y axis label font
    c.yAxis().setLabelStyle("Arial Bold");

    // Add a title to the y axis
    c.yAxis().setTitle("USD (in millions)");

    // Add a box-whisker layer to represent the waterfall bars
    BoxWhiskerLayer layer = c.addBoxWhiskerLayer(boxTop, boxBottom);

    // Color the bars depending on whether it is positive or negative
    for(int i = 0; i < boxTop.Length; ++i) {
        if (boxTop[i] >= boxBottom[i]) {
            layer.setBoxColor(i, posColor);
        } else {
            layer.setBoxColor(i, negColor);
        }
    }

    // Put data labels on the bars to show the cash flow using Arial Bold font
    layer.setDataLabelFormat("{={top}-{bottom}}M");
    layer.setDataLabelStyle("Arial Bold").setAlignment(Chart.Center);

    // Output the chart
    WebChartViewer1.Image = c.makeWebImage(Chart.PNG);

    // Include tool tip for the chart
    WebChartViewer1.ImageMap = c.getHTMLImageMap("", "",
        "title='{xLabel}: {={top}-{bottom}} millions'");
}

</script>

<html>
<body>
    <chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>

[ASP.NET Web Forms - VB Version] NetWebCharts\VBNetASP\posnegwaterfall.aspx
(Click here on how to convert this code to code-behind style.)
<%@ Page Language="VB" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %>

<!DOCTYPE html>

<script runat="server">

'
' Page Load event handler
'
Protected Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)

    ' 4 data points to represent the cash flow for the Q1 - Q4
    Dim data() As Double = {230, -140, 220, 330}

    ' We want to plot a waterfall chart showing the 4 quarters as well as the total
    Dim labels() As String = {"1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter", "Total"}

    ' The top side of the bars in a waterfall chart is the accumulated data. We use the
    ' ChartDirector ArrayMath utility to accumulate the data. The "total" is handled by inserting a
    ' zero point at the end before accumulation (after accumulation it will become the total).
    Dim boxTop() As Double = New ArrayMath(data).insert2(0, 1, UBound(data) + 1).acc().result()

    ' The botom side of the bars is just the top side of the previous bar. So we shifted the top
    ' side data to obtain the bottom side data.
    Dim boxBottom() As Double = New ArrayMath(boxTop).shift(1, 0).result()

    ' The last point (total) is different. Its bottom side is always 0.
    boxBottom(UBound(boxBottom)) = 0

    ' In this example, we want to use different colors depending on the data is positive or
    ' negative.
    Dim posColor As Integer = &H00ff00
    Dim negColor As Integer = &Hff0000

    ' Create a XYChart object of size 500 x 280 pixels. Set background color to light blue (ccccff),
    ' with 1 pixel 3D border effect.
    Dim c As XYChart = New XYChart(500, 300, &Hccccff, &H000000, 1)

    ' Add a title to the chart using 13 points Arial Bold Itatic font, with white (ffffff) text on a
    ' deep blue (0x80) background
    c.addTitle("Corporate Cash Flow - Year 2004", "Arial Bold Italic", 13, &Hffffff _
        ).setBackground(&H000080)

    ' Set the plotarea at (55, 50) and of size 430 x 215 pixels. Use alternative white/grey
    ' background.
    c.setPlotArea(55, 50, 430, 215, &Hffffff, &Heeeeee)

    ' Add a legend box at (55, 25) using 8pt Arial Bold font with horizontal layout, with
    ' transparent background and border color.
    Dim b As LegendBox = c.addLegend(55, 25, False, "Arial Bold", 8)
    b.setBackground(Chart.Transparent, Chart.Transparent)

    ' Add keys to show the colors for positive and negative cash flows
    b.addKey("Positive Cash Flow", posColor)
    b.addKey("Negative Cash Flow", negColor)

    ' Set the labels on the x axis using Arial Bold font
    c.xAxis().setLabels(labels).setFontStyle("Arial Bold")

    ' Set the x-axis ticks and grid lines to be between the bars
    c.xAxis().setTickOffset(0.5)

    ' Use Arial Bold as the y axis label font
    c.yAxis().setLabelStyle("Arial Bold")

    ' Add a title to the y axis
    c.yAxis().setTitle("USD (in millions)")

    ' Add a box-whisker layer to represent the waterfall bars
    Dim layer As BoxWhiskerLayer = c.addBoxWhiskerLayer(boxTop, boxBottom)

    ' Color the bars depending on whether it is positive or negative
    For i As Integer = 0 To UBound(boxTop)
        If boxTop(i) >= boxBottom(i) Then
            layer.setBoxColor(i, posColor)
        Else
            layer.setBoxColor(i, negColor)
        End If
    Next

    ' Put data labels on the bars to show the cash flow using Arial Bold font
    layer.setDataLabelFormat("{={top}-{bottom}}M")
    layer.setDataLabelStyle("Arial Bold").setAlignment(Chart.Center)

    ' Output the chart
    WebChartViewer1.Image = c.makeWebImage(Chart.PNG)

    ' Include tool tip for the chart
    WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", _
        "title='{xLabel}: {={top}-{bottom}} millions'")

End Sub

</script>

<html>
<body>
    <chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>

[ASP.NET MVC - Controller] NetMvcCharts\Controllers\PosnegwaterfallController.cs
using System;
using System.Web.Mvc;
using ChartDirector;

namespace NetMvcCharts.Controllers
{
    public class PosnegwaterfallController : Controller
    {
        //
        // Default Action
        //
        public ActionResult Index()
        {
            ViewBag.Title = "Pos/Neg Waterfall Chart";
            createChart(ViewBag.Viewer = new RazorChartViewer(HttpContext, "chart1"));
            return View("~/Views/Shared/ChartView.cshtml");
        }

        //
        // Create chart
        //
        private void createChart(RazorChartViewer viewer)
        {
            // 4 data points to represent the cash flow for the Q1 - Q4
            double[] data = {230, -140, 220, 330};

            // We want to plot a waterfall chart showing the 4 quarters as well as the total
            string[] labels = {"1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter", "Total"};

            // The top side of the bars in a waterfall chart is the accumulated data. We use the
            // ChartDirector ArrayMath utility to accumulate the data. The "total" is handled by
            // inserting a zero point at the end before accumulation (after accumulation it will become
            // the total).
            double[] boxTop = new ArrayMath(data).insert2(0, 1, data.Length).acc().result();

            // The botom side of the bars is just the top side of the previous bar. So we shifted the top
            // side data to obtain the bottom side data.
            double[] boxBottom = new ArrayMath(boxTop).shift(1, 0).result();

            // The last point (total) is different. Its bottom side is always 0.
            boxBottom[boxBottom.Length - 1] = 0;

            // In this example, we want to use different colors depending on the data is positive or
            // negative.
            int posColor = 0x00ff00;
            int negColor = 0xff0000;

            // Create a XYChart object of size 500 x 280 pixels. Set background color to light blue
            // (ccccff), with 1 pixel 3D border effect.
            XYChart c = new XYChart(500, 300, 0xccccff, 0x000000, 1);

            // Add a title to the chart using 13 points Arial Bold Itatic font, with white (ffffff) text
            // on a deep blue (0x80) background
            c.addTitle("Corporate Cash Flow - Year 2004", "Arial Bold Italic", 13, 0xffffff
                ).setBackground(0x000080);

            // Set the plotarea at (55, 50) and of size 430 x 215 pixels. Use alternative white/grey
            // background.
            c.setPlotArea(55, 50, 430, 215, 0xffffff, 0xeeeeee);

            // Add a legend box at (55, 25) using 8pt Arial Bold font with horizontal layout, with
            // transparent background and border color.
            LegendBox b = c.addLegend(55, 25, false, "Arial Bold", 8);
            b.setBackground(Chart.Transparent, Chart.Transparent);

            // Add keys to show the colors for positive and negative cash flows
            b.addKey("Positive Cash Flow", posColor);
            b.addKey("Negative Cash Flow", negColor);

            // Set the labels on the x axis using Arial Bold font
            c.xAxis().setLabels(labels).setFontStyle("Arial Bold");

            // Set the x-axis ticks and grid lines to be between the bars
            c.xAxis().setTickOffset(0.5);

            // Use Arial Bold as the y axis label font
            c.yAxis().setLabelStyle("Arial Bold");

            // Add a title to the y axis
            c.yAxis().setTitle("USD (in millions)");

            // Add a box-whisker layer to represent the waterfall bars
            BoxWhiskerLayer layer = c.addBoxWhiskerLayer(boxTop, boxBottom);

            // Color the bars depending on whether it is positive or negative
            for(int i = 0; i < boxTop.Length; ++i) {
                if (boxTop[i] >= boxBottom[i]) {
                    layer.setBoxColor(i, posColor);
                } else {
                    layer.setBoxColor(i, negColor);
                }
            }

            // Put data labels on the bars to show the cash flow using Arial Bold font
            layer.setDataLabelFormat("{={top}-{bottom}}M");
            layer.setDataLabelStyle("Arial Bold").setAlignment(Chart.Center);

            // Output the chart
            viewer.Image = c.makeWebImage(Chart.PNG);

            // Include tool tip for the chart
            viewer.ImageMap = c.getHTMLImageMap("", "", "title='{xLabel}: {={top}-{bottom}} millions'");
        }
    }
}

[ASP.NET MVC - View] NetMvcCharts\Views\Shared\ChartView.cshtml
@{ Layout = null; }

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body style="margin:5px 0px 0px 5px">
    <div style="font:bold 18pt verdana;">
        @ViewBag.Title
    </div>
    <hr style="border:solid 1px #000080" />
    <div>
        @{
            if (ViewBag.Viewer is Array)
            {
                // Display multiple charts
                for (int i = 0; i < ViewBag.Viewer.Length; ++i)
                {
                    @:@Html.Raw(ViewBag.Viewer[i].RenderHTML())
                }
            }
            else
            {
                // Display one chart only
                @:@Html.Raw(ViewBag.Viewer.RenderHTML())
            }
        }
    </div>
</body>
</html>