A Rose 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.

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

<canvas id="cvs" width="600" height="500">[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>