File content as of revision 15:ce1b7c40ecb8:

Chart.defaults.global.defaultFontFamily = "triplicate, Courier, 'Courier New', monospace";
Chart.defaults.global.defaultFontSize = 15;
Chart.defaults.global.defaultFontColor = "#efefef";
Chart.defaults.global.legend.display = false;
Chart.defaults.global.elements.line.backgroundColor = "rgba(75, 192, 192, 0.1)";
Chart.defaults.global.elements.line.borderColor = "rgba(75, 192, 192, 1)";

class Charts {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
    }

    addChart(chart) {
        const chartContainer = document.createElement("div");
        chartContainer.classList.add('chart');

        const title = document.createElement("h2");
        title.innerHTML = "Sensor #1";
        title.classList.add('chart__title');

        chartContainer.appendChild(title);
        chartContainer.appendChild(chart);

        this.container.appendChild(chartContainer);
    }
}

class SensorChart {
    constructor() {
        this.canvas = document.createElement("canvas");
        this.canvas.height = "70";
    }

    getCanvas() {
        return this.canvas;
    }

    render() {
        this.chart = new Chart(this.canvas, {
            type: 'line',
            data: {
                labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
                datasets: [
                    {
                        label: 'Sensor #1',
                        data: [12, 13, 90, 87, 15, 20, 19, 20, 14, 21]
                    }
                ]
            }
        });
    }
}

const sensorCharts = new Charts("charts");
const sensorChart = new SensorChart();
sensorCharts.addChart(sensorChart.getCanvas());
sensorChart.render();