Columns and area

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

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

//No CSS for this example 

        var t = new ZoomCharts.TimeChart({
            //theme: TimeChart.themes.round,
            container: document.getElementById("demo"),
            data: {
                dataFunction: function (from, to, unit, success, error) {
                    $.get("/dvsl/data/time-chart/bitcoin-" + unit + ".json", null, function (data) {
                        success(data);
                    });
                },
                units: ["M", "d", "h", "y"],
                timestampInSeconds: true
            },
            interaction: {
                zooming: { sensitivity: 5 },
                resizing: { enabled: false },
                scrolling: { limitFrom: "oldestDataRounded", limitTo: "newestDataRounded" }
            },
            timeAxis: { maxUnitWidth: 200 },
            valueAxis: { secondary: { enabled: true, side: "right", position: "outside" } },
            stacks: { a: { type: "based" } },
            series: [
                {
                    type: "columns",
                    name: "Turnover, USD",
                    data: { aggregation: "max", index: 3 },
                    valueAxis: "secondary",
                    style: {
                        fillColor: "rgba(153,204,0,1)",
                        depth: 3,
                        gradient: 0.9
                    }
                },
                {
                    type: "line",
                    name: "Low",
                    stack: "a",
                    data: { aggregation: "min", index: 2 },
                    style: {
                        lineColor: "#CCCC33",
                        smoothing: true,
                        width: 3
                    }
                },
                {
                    type: "line",
                    name: "High",
                    stack: "a",
                    data: { aggregation: "max", index: 1 },
                    style: {
                        lineColor: "#CC3333",
                        fillColor: "rgba(255,51,0,0.5)",
                        smoothing: true,
                        width: 3
                    }
                }
            ],
            toolbar: {
                displayPeriod: false,
                logScale: false,
                export: true
            },
            area: {
                displayUnits: [
                    { unit: "1 m", name: "minute" },
                    { unit: "1 h", name: "hour" },
                    { unit: "1 d", name: "day" },
                    { unit: "1 w", name: "week" },
                    { unit: "1 M", name: "month" },
                    { unit: "1 y", name: "year" }
                ]
            },
            navigation: {
                initialDisplayUnit: "y"
            }
        });
    

//No separate data for this example