(Area) chart, add vertical marker of some kind

[Hans]

Hello all 

 

I am an experienced software developer , but still somewhat a newbie to Blazor and Telerik, so bear with me ;)

I am creating telerik charts, and the charts display historical as wel as future data (in multiple series), and I need the data separated by a "now" marker called "probedate".

I have managed to use ChartCategoryAxisPlotBands on my column charts to have a marker where the current probedate resides. However, this trick does work for e.g. area charts and line charts. (See screenshot)

I have also tried to adding an extra vertical axis, but this didn't work out as I hoped either.

In a nutshell: I would like to have some kind of vertical marker that can show me the position of the probedate in the chart, this can be eg a vertical line, or a chart background color change on the probedate or some other nifty solution.

TIAHans

 

<TelerikChart Transitions=false>
            <ChartTooltip Visible="true" />
            <ChartTitle Text="@nameof(DepreciationBookValueHarvesterDto.Depreciations)" />
            <ChartLegend Visible="false" />
            <ChartSeriesItems>
                <ChartSeries Type="ChartSeriesType.Column" Data="@data?.Data?.Depreciations?.Select(x => new { Value = x.Value })" Field="@nameof(DateTime_DoubleDto.Value)" />
            </ChartSeriesItems>
            <ChartCategoryAxes>
                <ChartCategoryAxis Categories="@ChartUtils.GetXAxisDateLabels(data?.Data?.Depreciations,DateResolution)"
                                   AxisCrossingValue="@ChartUtils.yaxiscrossingvalues">
                    <ChartCategoryAxisLabels Step="@ChartUtils.CategoryAxisLabelStep(data?.Data?.Depreciations?.Count)">
                        <ChartCategoryAxisLabelsRotation Angle="-45" />
                    </ChartCategoryAxisLabels>
                    <ChartCategoryAxisPlotBands>
                        <ChartCategoryAxisPlotBand From="ChartUtils.PositionOfKey(data?.Data?.Depreciations,probeDate)" Color="Blue" Opacity="0.1" />
                    </ChartCategoryAxisPlotBands>
                </ChartCategoryAxis>
            </ChartCategoryAxes>
            <ChartValueAxes>
                <ChartValueAxis AxisCrossingValue="@ChartUtils.xaxiscrossingvalues">
                    <ChartValueAxisTitle Text="@ValueUnitAxisTitle()" />
                    <ChartValueAxisMajorGridLines Visible="false" />
                </ChartValueAxis>
            </ChartValueAxes>
        </TelerikChart>
        <TelerikChart Transitions=false>
            <ChartTooltip Visible="true" />
            <ChartTitle Text="@nameof(DepreciationBookValueHarvesterDto.BookValue)" />
            <ChartLegend Visible="false" />
            <ChartSeriesItems>
                <ChartSeries Type="ChartSeriesType.Area" Data="@data?.Data?.BookValue?.Select(x => new { Value = x.Value })" Field="@nameof(DateTime_DoubleDto.Value)" />
            </ChartSeriesItems>
            <ChartCategoryAxes>
                <ChartCategoryAxis Categories="@ChartUtils.GetXAxisDateLabels(data?.Data?.BookValue,DateResolution)"
                                   AxisCrossingValue="@ChartUtils.yaxiscrossingvalues">
                    <ChartCategoryAxisLabels Step="@ChartUtils.CategoryAxisLabelStep(data?.Data?.BookValue?.Count)">
                        <ChartCategoryAxisLabelsRotation Angle="-45" />
                    </ChartCategoryAxisLabels>
                    <ChartCategoryAxisPlotBands>
                        <ChartCategoryAxisPlotBand From="ChartUtils.PositionOfKey(data?.Data?.BookValue,probeDate)" Color="Blue" Opacity="0.1" />
                    </ChartCategoryAxisPlotBands>
                </ChartCategoryAxis>
            </ChartCategoryAxes>
            <ChartValueAxes>
                <ChartValueAxis AxisCrossingValue="@ChartUtils.xaxiscrossingvalues">
                    <ChartValueAxisTitle Text="@ValueUnitAxisTitle()" />
                    <ChartValueAxisMajorGridLines Visible="false" />
                </ChartValueAxis>
            </ChartValueAxes>
        </TelerikChart>

 

 

[Dimo]

Hello Hans,

The same approach should work for Area and Line charts too. If the problem persists, please send a similar example with dummy data included.

Regards,
Dimo
Progress Telerik