Highlight series labels depending on the items values

Environment

Product Version 2019.3.917
Product RadHtmlChart for ASP.NET AJAX

Description

The labels Visual template functionality of RadHtmlChart allows for customizing the whole appearance of the series labels. If you need to highlight the Series labels depending on the item's value (in terms of fore and background color), you can implement a custom Visual template, redrawing the used elements via the Kendo Drawing API:

Solution

<telerik:RadHtmlChart runat="server" ID="RadarLineChart" Width="400" Height="400" Transitions="true" Skin="Silk">
    <PlotArea>
        <Series>
            <telerik:RadarLineSeries Name="TEST" MissingValues="Gap">
                <LabelsAppearance Visible="true" Color="Black" Position="Above" Visual="labelsVisual">
                </LabelsAppearance>
                <MarkersAppearance Visible="false" />
                <TooltipsAppearance Visible="false" />
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="35"></telerik:CategorySeriesItem>
                    <telerik:CategorySeriesItem Y="52"></telerik:CategorySeriesItem>
                    <telerik:CategorySeriesItem Y="28"></telerik:CategorySeriesItem>
                    <telerik:CategorySeriesItem Y="39"></telerik:CategorySeriesItem>
                    <telerik:CategorySeriesItem Y="15"></telerik:CategorySeriesItem>
                    <telerik:CategorySeriesItem Y="84"></telerik:CategorySeriesItem>
                    <telerik:CategorySeriesItem Y="68"></telerik:CategorySeriesItem>
                </SeriesItems>
            </telerik:RadarLineSeries>
        </Series>
        <XAxis>
            <Items>
                <telerik:AxisItem LabelText="Monday"></telerik:AxisItem>
                <telerik:AxisItem LabelText="Tuesday"></telerik:AxisItem>
                <telerik:AxisItem LabelText="Wednesday"></telerik:AxisItem>
                <telerik:AxisItem LabelText="Thursday"></telerik:AxisItem>
                <telerik:AxisItem LabelText="Friday"></telerik:AxisItem>
                <telerik:AxisItem LabelText="Saturday"></telerik:AxisItem>
                <telerik:AxisItem LabelText="Sunday"></telerik:AxisItem>
            </Items>
        </XAxis>
        <YAxis Visible="false" MinValue="0" MaxValue="100">
        </YAxis>
    </PlotArea>
    <ChartTitle>
        <Appearance Visible="false" />
    </ChartTitle>
    <Legend>
        <Appearance Visible="false" />
    </Legend>
</telerik:RadHtmlChart>
<script>
    function labelsVisual(e) {
        var geom = kendo.geometry;
        var draw = kendo.drawing;
        var center = e.rect.center();
        var rectGeom = new geom.Rect([e.rect.origin.x, e.rect.origin.y], [e.rect.width(), 15]);
        var rect, label, layout;
        if (e.text > 50) {
            rect = new draw.Rect(rectGeom, {
                fill: {
                    color: "red"
                },
                stroke: { width: 0 }
            })

            label = new draw.Text(e.text, [center.x, e.rect.origin.y], {
                fill: {
                    color: "white"
                }
            });
        }
        else {
            rect = new draw.Rect(rectGeom, {
                fill: {
                    color: "black"
                },
                stroke: { width: 0 }
            })

            label = new draw.Text(e.text, [center.x, e.rect.origin.y], {
                fill: {
                    color: "red"
                }
            });
        }
        layout = new draw.Layout(rect, {
            spacing: 5,
            alignItems: "center"
        });

        layout.append(rect, label);
        return layout;
    }
</script>

See Also

In this article
Not finding the help you need? Improve this article