multi-level-labels.html

<div class="control-section">
    <div id="container" align="center"> </div>
</div>
<div id="action-description">
    <p>
        This sample visualizes the product wise monthly sales revenue of the items sold by an online retailer in a year.  The products are grouped based on the purchase domains and revenue is displayed as cell data.
    </p>
</div>
<div id="description">
    <p>
        In this example, you can see how to group axis labels. 
        You can customize text in each level by using <code>alignment</code>, <code>textSytle</code> and <code>border</code> properties.
    </p>
    <p>Border of the axis labels can be customized by using <code>type</code> property.
    </p>
    <ul>
        <li><code>Rectangle</code></li>
        <li><code>Brace</code></li>
        <li><code>WithoutTopBorder</code></li>
        <li><code>WithoutBottomBorder</code></li>
        <li><code>WithoutTopandBottomBorder</code></li>
        <li><code>withoutBorder</code>.</li>
    </ul>
    <br>
    <p style="font-weight: 500">Injecting Module</p>
    <p>
        Heatmap component features are segregated into individual feature-wise modules. To use a tooltip, inject the <code>Tooltip</code> module
        using the <code>Heatmap.Inject(Tooltip)</code> method.
       </p>
</div>
<!-- custom code start -->
<style>
    #control-container {
        padding: 0px !important;
    }
</style>
<!-- custom code end -->