# A Waterfall chart with a table in the tooltips

This uses the new `%{table}` option for formatted tooltips. The code to implement it can get quite hairy (three nested arrays) so pay close attention when writing it.

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.dynamic.js"></script>
    <script src="RGraph.common.tooltips.js"></script>
    <script src="RGraph.waterfall.js"></script>

Put this where you want the chart to show up:

    <canvas id="cvs" width="750" height="250">[No canvas support]</canvas>

    <style>
        .RGraph_tooltip h2 {
            margin: 5px;
            font-style: italic;
        }

        .RGraph_tooltip table {
            border-collapse: collapse;
            font-family: Verdana;
        }

        .RGraph_tooltip thead th {
            font-style: italic;
        }

        .RGraph_tooltip th,
        .RGraph_tooltip td {
            padding: 5px;
            border: 1px solid #ccc;
        }

        .RGraph_tooltip td:nth-child(1){
            font-style: italic;
        }

        .RGraph_tooltip tr:nth-child(2n+2) td:nth-child(1n+2){
            background-color: #eee;
        }

        .RGraph_tooltip tr:nth-child(2n+1) td:nth-child(1n+2){
            background-color: #ddd;
        }
    </style>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):