ChartJS Line Chart

Multiple Line Chart

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<body>
    <div class="mainContainer">
        <div class="mainSubContainer" id="main">
            <div class="graphContainer">
                <div class="graphHeader">Temperatur</div>
                <div class="graphElement"><canvas id="canvas1"></canvas></div>
            </div>
            <div class="graphContainer">
                <div class="graphHeader">relative Luftfeuchte</div>
                <div class="graphElement"><canvas id="canvas2"></canvas></div>
            </div>
        </div>
    </div>
</body>

CSS

canvas { background-color : #eee;
}

JavaScript

var data = {
            labels: ["a","b","c"],
            datasets: [{
                data: [17.697,18.574,18.528],
                borderColor: "rgba(0, 150, 130, 0.8)",
                backgroundColor: "rgba(0, 150, 130, 0.6)",
            }]
        };

        var data2 = {
            labels: ["a","b","c"],
            datasets: [{
                data: [99.644,55.834,57.289],
                borderColor: "rgba(70, 100, 170, 0.8)",
                backgroundColor: "rgba(70, 100, 170, 0.6)",
            }]
        };


        var canvas1 = document.getElementById("canvas1").getContext("2d");
        var myFirstChart = new Chart(canvas1, {
            type: 'line',
            data: data,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        id: 'A',
                        type: 'linear',
                        scaleLabel: {
                            display: true,
                            labelString: '°C',
                            fontSize: 20,
                            padding: {
                              bottom: -8
                            }
                        },
                        ticks: {
                            fontSize: 40,
                        },
                    }, ],
                    xAxes: [{
                        display: false,
                        ticks: {
                            fontSize: 20,
                        }, 
                    }, ],
                }

            }
        });

        var canvas2 = document.getElementById("canvas2").getContext("2d");
        var myFirstChart2 = new Chart(canvas2, {
            type: 'line',
            data: data2,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
...