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
Steve
Top achievements
Rank 1
Steve asked on 05 Jan 2022, 10:16 PM

This is for Telerik UI for ASP.net AJAX.

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

I see you can do outlier, but I need these two.

Thanks in advance!

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
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
Top achievements
Rank 1
commented on 24 Feb 2022, 01:10 AM

Is their a way to do this from the code-behind instead?
Vessy
Telerik team
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.
Tags
Ajax Styling
Asked by
Steve
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or