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

1 Answer 6 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.

Tags
Ajax Styling
Asked by
Steve
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or