<TelerikChart Height="300px" Width="600px">

    <ChartSeriesItems>
        <ChartSeries Type="@ChartSeriesType.Candlestick"
                     Name="Sensor Status"
                     Data="@StatusData"
                     CategoryField="@(nameof(StatusPoint.Date))"
                     OpenField="@nameof(StatusPoint.Open)"
                     CloseField="@nameof(StatusPoint.Close)"
                     HighField="@nameof(StatusPoint.High)"
                     LowField="@nameof(StatusPoint.Low)"
                     ColorField="@nameof(StatusPoint.Color)" />
        <ChartSeries Type="@ChartSeriesType.Line"
                     Color="orange"
                     Name="Sensor Data"
                     Data="@MeasureData"
                     CategoryField="@(nameof(MeasurePoint.Date))"
                     Field="@nameof(MeasurePoint.Value)" />
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Type="@ChartCategoryAxisType.Date" BaseUnit="@ChartCategoryAxisBaseUnit.Hours">
        </ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartValueAxes>
        <ChartValueAxis>
            <ChartValueAxisLabels></ChartValueAxisLabels>
        </ChartValueAxis>
    </ChartValueAxes>

</TelerikChart>

@code {
    List<StatusPoint> StatusData { get; set; }
    List<MeasurePoint> MeasureData { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await GenerateChartData();
    }

    async Task GenerateChartData()
    {
        StatusData = new List<StatusPoint>()
        {
            new StatusPoint(new DateTime(2022, 7, 4, 7, 0, 0), true),
            new StatusPoint(new DateTime(2022, 7, 4, 8, 0, 0), false),
            new StatusPoint(new DateTime(2022, 7, 4, 9, 0, 0), true),
            new StatusPoint(new DateTime(2022, 7, 4, 10, 0, 0), true),
        };

        MeasureData = new List<MeasurePoint>()
        {
            new MeasurePoint() { Date = new DateTime(2022, 7, 4, 7, 0, 0), Value = 4 },
            new MeasurePoint() { Date = new DateTime(2022, 7, 4, 8, 0, 0), Value = null },
            new MeasurePoint() { Date = new DateTime(2022, 7, 4, 9, 0, 0), Value = 15 },
            new MeasurePoint() { Date = new DateTime(2022, 7, 4, 10, 0, 0), Value = 6 }
        };
    }

    public class MeasurePoint
    {
        public DateTime Date { get; set; }
        public decimal? Value { get; set; }
    }

    public class StatusPoint
    {
        public StatusPoint() { }

        public StatusPoint(DateTime date, bool status)
        {
            Date = date;
            Open = 0;
            Close = 1;
            Color = status ? "green" : "red";
        }
        public DateTime Date { get; set; }
        public int Open { get; set; }
        public int Close { get; set; }
        public int High => Close;
        public int Low => Open;
        public string Color { get; set; }
    }
}