Is there a way to change color and or line size of the Medium and Mean lines in a Box Plot Chart?

1 Answer 21 Views

Ajax Styling

1 Answer, 1 is accepted

answered on 10 Jan 2022, 03:04 PM

Hello Steve,

The desired settings can be configured through the underlying Kendo UI widget of the chart by setting its series.median and series.mean options.

For example, you can configure them in the client-side Load event of RadHtmlChart:

        <script>
            function onChartLoad(chart, args) {
                var chartWidget = chart.get_kendoWidget();

                for (var i = 0; i < chart.get_kendoWidget().options.series.length; i++) {
                    chartWidget.findSeriesByIndex(i)._options.median = { color: 'yellow', width: 5 };
                    chartWidget.findSeriesByIndex(i)._options.mean = { color: '#ff0000', width: 3 };

                }
            }
        </script>
        <telerik:RadHtmlChart runat="server" ID="BoxPlotChart" Width="800px" Height="400px">
            <ClientEvents OnLoad="onChartLoad" />
            <ChartTitle Text="Analysis of Train Arrival Delay"></ChartTitle>
            <PlotArea>
                <Series>
                    <telerik:BoxPlotSeries>
                        <SeriesItems>
                            <telerik:BoxPlotSeriesItem Lower="26" Q1="38" Median="51" Q3="63" Upper="75" Mean="49">

                                <Outliers>
                                    <telerik:Outlier Value="20" />
                                    <telerik:Outlier Value="140" />
                                    <telerik:Outlier Value="145" />
                                    <telerik:Outlier Value="5" />
                                    <telerik:Outlier Value="90" />
                                    <telerik:Outlier Value="100" />
                                </Outliers>
                            </telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Lower="40" Q1="65" Median="71" Q3="115" Upper="140" Mean="80">
                                <Outliers>
                                    <telerik:Outlier Value="150" />
                                    <telerik:Outlier Value="28" />
                                </Outliers>
                            </telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Lower="31" Q1="41" Median="52" Q3="62" Upper="70" Mean="52">
                                <Outliers>
                                    <telerik:Outlier Value="14" />
                                    <telerik:Outlier Value="20" />
                                    <telerik:Outlier Value="85" />
                                    <telerik:Outlier Value="135" />
                                </Outliers>
                            </telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Lower="39" Q1="62" Median="68" Q3="110" Upper="115" Mean="78">
                                <Outliers>
                                    <telerik:Outlier Value="125" />
                                    <telerik:Outlier Value="18" />
                                </Outliers>
                            </telerik:BoxPlotSeriesItem>
                        </SeriesItems>
                        <OutliersAppearance MarkersType="Cross">
                            <BorderAppearance Color="#fa9819" />
                        </OutliersAppearance>
                        <ExtremesAppearance MarkersType="Circle">
                            <BorderAppearance Color="#d41414" />
                        </ExtremesAppearance>
                        <Appearance FillStyle-BackgroundColor="#4f99d2"></Appearance>
                        <TooltipsAppearance Visible="false"></TooltipsAppearance>
                    </telerik:BoxPlotSeries>
                </Series>
                <YAxis>
                    <TitleAppearance Text="Minutes"></TitleAppearance>
                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                </YAxis>
                <XAxis>
                    <TitleAppearance Text="Quarter">
                    </TitleAppearance>
                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                    <Items>
                        <telerik:AxisItem LabelText="Quarter 1" />
                        <telerik:AxisItem LabelText="Quarter 2" />
                        <telerik:AxisItem LabelText="Quarter 3" />
                        <telerik:AxisItem LabelText="Quarter 4" />
                    </Items>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>

Regards,
Vessy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Steve

commented on 24 Feb 2022, 01:10 AM

Is their a way to do this from the code-behind instead?

Vessy

commented on 24 Feb 2022, 03:09 PM

Hi Steve, I am afraid that the mean and median options are not exposed in RadHtmlChart, thus they cannot be set on the server-side. The only way to configure them at the moment is on the client-side, through the Kendo UI chart widget.