Back

Toolbar outside chart

With the 'location' property under 'toolbar', you can choose if the toolbar is displayed in a dedicated area outside of the chart ("outside") or if it overlays the chart ("inside").

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

    var t = new TimeChart(
            {
                container: document.getElementById("demo"),
                data:
                {
                    units:["h"],
                    url: "/dvsl/data/time-chart/temperature-kuldiga-h.json"
                },
                toolbar:{
                    location: "outside",

                    logScale: true,
                    displayUnit: true,
                    displayPeriod: true,
                    back: true,
                    zoomOut: true,
                    export: true
                }
            }
    );

Data

Data 
//Data too large to output
Download Data