Custom info popup example

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

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

//No CSS for this example 

var t = new TimeChart(
{
    container: document.getElementById("demo"),
    data:
    {
        units: ["m"],
        preloaded: {
            unit: "m",
            values: [
                [-536425200, 5890.74, 2106.55, 2019.61, 1523.81],
                [-531327600, 5190.74, 2106.55, 2001.74, 1541.74],
                [-523378800, 5090.74, 2106.55, 2001.74, 1541.74],
                [-515430000, 5881.43, 2116.63, 2001.74, 1523.81],
                [-504889200, 5572.11, 2116.63, 1974.93, 1541.74],
                [-499791600, 5262.8, 2116.63, 1957.06, 1523.81]
            ]
        },
        timestampInSeconds: true
    },
    info: {
        advanced: {
            showHeader: false, // disable the built-in header
            contentsFunction: function (data, activeSeries, range) {
                var out = "";

                // add the header (since the default was disabled above)
                var from = new Date(range[0]).toISOString();
                var to = new Date(range[1]).toISOString();
                out += "<strong style='text-align:right'><small>From</small> " + from + "<br/><small>to</small> " + to + "</strong>";

                // the data object contains a list of all stacks defined in the configuration.
                // if no stacks are used, it will contain a separate stack for each series.
                for (var stackIndex = 0; stackIndex < data.length; stackIndex++) {
                    var stack = data[stackIndex];

                    // add series "header" if there is more than one series defined in the stack
                    if (stack.name && stack.data.length > 1) {
                        out += "<h3>" + stack.name + "</h3>";
                    }

                    out += "<table cellspacing=\"0\">";

                    // each stack contains a list of series
                    for (var seriesIndex = 0; seriesIndex < stack.data.length; seriesIndex++) {
                        var series = stack.data[seriesIndex];

                        // use the same color as provided in the series configuration
                        var color = series.config.style.fillColor || series.config.style.lineColor;

                        out += "<tr><td style=\"";
                        out += "color: " + color + ";";

                        // when the user hovers on certain series value on the chart, it will be highlighted in the popup
                        if (activeSeries && series.config.id === activeSeries.id)
                            out += "border-color: " + color + "; font-weight: bold";

                        // note that while it is easier to set just the inline style, those might not work if the 
                        // page contains Content-Security-Policy headers that disable such styles.
                        // in this case you can use two special attributes that will then be processed by the chart
                        // to set `style.color` and `style.borderColor`.
                        // 
                        // if (color) out += ` data-color=\"${color}\"`;
                        // if (activeSeries && series.config.id === activeSeries.id) out += ` data-selected`;

                        out += "\">";
                        out += series.name || stack.name;
                        out += "</td><td>";

                        if (!series.values) {
                            out += "No data";
                        } else {
                            out += series.values.avg.toString() + " GBP";
                        }

                        out += "</td></tr>";
                    }

                    out += "</table>";
                }

                return out;
            }
        }
    },
    valueAxisDefault: { title: "Price, GBP" },
    stacks: { "detailStack": { name: "Details" } },
    series: [
        {
            name: "Total average",
            data: { index: 1, aggregation: "avg" },
            style: { fillColor: "#8c939f", lineColor: "#727b8a", lineWidth: 1, padding: [2, 2] }
        },
        {
            name: "Average for X",
            stack: "detailStack",
            data: { index: 2, aggregation: "avg" },
            style: { fillColor: "#77c277", lineColor: "#67ad67", lineWidth: 1, padding: [2, 2] }
        },
        {
            name: "Average for Y",
            stack: "detailStack",
            data: { index: 3, aggregation: "avg" },
            style: { fillColor: "#59a2c0", lineColor: "#4b93b1", lineWidth: 1, padding: [2, 2] }
        },
        {
            name: "Average for Z",
            stack: "detailStack",
            data: { index: 4, aggregation: "avg" },
            style: { fillColor: "#ad7d62", lineColor: "#9a6c53", lineWidth: 1, padding: [2, 2] }
        }
    ]
});

//No separate data for this example