SensorLineChartTile.html

<style>
    .sensorLineChartTile {
        background-color: #2F2F2F;
        font-size: 4vmin;
        font-weight: bold;
        border-radius: 1vh;
    }

    .sensorLineChartTile .content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .sensorLineChartTile .chart {
        flex: 1;
    }

    .sensorLineChartTile .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 5%;
    }

    .sensorLineChartTile .title {
        font-size: 2.2vmin;
    }

    .sensorLineChartTile .header-left {
        display: flex;
        flex-direction: column;
        padding-top: 3%;
        padding-left: 5%;
    }

    .sensorLineChartTile i {
        margin-right: 5%;
        font-size: 3.8vmin;
    }

    .sensorLineChartTile .title,
    .sensorLineChartTile .value {
        text-align: left;
    }
</style>

<div class="sensorLineChartTile">
    <div class="content">
        <div class="header">
            <div class="header-left">
                <div class="title">{{ title }}</div>
                <div class="value">{{ latest }}{{ unit }}</div>
            </div>
            <i class="wi {{ icon }}"></i>
        </div>
        <div class="chart" id="{{ chartId }}"></div>
    </div>

    <script>
        function createChart_{{ chartId | replace('-', '_') }}()
        {
            let data = [{
                x: {{ x }},
                y: {{ y }},
                fill: 'tozeroy',
                type: 'scatter',
                mode: 'lines',