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 id="chart"></div>
    </div>

    <script>
        Plotly.newPlot(document.getElementById('chart'), [{
                x: {{ x }},
                y: {{ y }},
                fill: 'tozeroy',
                type: 'scatter',
                marker: {
                    color: 'rgba(254, 151, 0, 1)',
                    size: 10,
                },
                line: {
                    shape: 'spline',
                    color: 'rgba(254, 151, 0, 1)',
                    width: 3
                },
                fillcolor: 'rgba(254, 151, 0, 0.2)'
            }], {
                xaxis: {
                    showgrid: false,
                    zeroline: false,
                    visible: false,
                },
                yaxis: {
                    showgrid: false,
                    zeroline: false,
                    visible: false,
                },
                paper_bgcolor: 'rgba(0,0,0,0)',
                plot_bgcolor: 'rgba(0,0,0,0)',
                margin: {
                    "b": 0,
                    "l": 0,
                    "r": 0,
                    "t": 0
                }
            },
            {
                displaylogo: false,
                responsive: true
            });
    </script>
</div>