Support secondary x-axis

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 09 Apr 2021 10:36 by ADMIN

Douw

Created on: 23 Mar 2016 11:44

Category: HtmlChart

Type: Feature Request

Support secondary x-axis

Add support for a secondary x-axis at the top of the chart.
Please use consistent axis types.
Why would the primary axes be of type Telerik.Web.UI.HtmlChart.PlotArea.Chart*Axis and the secondary y-axis be of type Telerik.Web.UI.AxisY?

1 comment

ADMIN

Vessy

Posted on: 09 Apr 2021 10:36

Hi Douw,

Thanks a lot for your feature request!

While this feature gets implement it, you can achieve the desired functionality by using one of the following approaches:

1. You can use a PlotBand:

        <telerik:RadHtmlChart runat="server" ID="AreaChart" Width="800" Height="500" Transitions="true">
            <ClientEvents OnLoad="onChartLoad" />
            <PlotArea>
                <YAxis>
                    <PlotBands>
                        <telerik:PlotBand From="40.0" To="40.2" Color="#ff0000" Alpha="100" />
                    </PlotBands>
                </YAxis>
                <Series>
                    <telerik:ColumnSeries Name="Series1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="20" />
                            <telerik:CategorySeriesItem Y="50" />
                            <telerik:CategorySeriesItem Y="40" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Series2">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="30" />
                            <telerik:CategorySeriesItem Y="10" />
                            <telerik:CategorySeriesItem Y="40" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>

2. You can use an additional LineSeries which is hidden from the legend:

        <telerik:RadHtmlChart runat="server" ID="AreaChart" Width="800" Height="500" Transitions="true">
            <ClientEvents OnLoad="onChartLoad" />
            <PlotArea>
                <Series>
                    <telerik:LineSeries VisibleInLegend="false">
                        <MarkersAppearance Visible="false" />
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="4" />
                            <telerik:CategorySeriesItem Y="4" />
                            <telerik:CategorySeriesItem Y="4" />
                        </SeriesItems>
                    </telerik:LineSeries>
                    <telerik:ColumnSeries Name="Series1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="2" />
                            <telerik:CategorySeriesItem Y="5" />
                            <telerik:CategorySeriesItem Y="4" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Series2">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="3" />
                            <telerik:CategorySeriesItem Y="1" />
                            <telerik:CategorySeriesItem Y="4" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>

3. You can use the kendo UI chart directly and add category axes for the series via series.categoryAxis option demonstrated here: http://dojo.telerik.com/@Iliana/orIBA

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.