x-axis label on stacked bar chart

[David Penny]

Hi,

I am creating a stacked bar chart programatically with one or several series across the x-axis.  The chart is being created and displays fine, except I cannot work out how to change the x-axis labels to a variable text item - everything I have tried so far just results in the x-axis being labelled as 1, 2, 3 etc...

The code being used (and working at present) is:

 Dim cs_hours As New ChartSeries
                    cs_hours.Name = "Hours Recorded"
                    Dim cs_under As New ChartSeries
                    cs_under.Name = "Hours Deficit"
                    Dim cs_over As New ChartSeries
                    cs_over.Name = "Hours Over"

                    cs_hours.Type = ChartSeriesType.StackedBar
                    cs_under.Type = ChartSeriesType.StackedBar
                    cs_over.Type = ChartSeriesType.StackedBar

                    cs_hours.Appearance.FillStyle.FillType = Styles.FillType.Solid
                    cs_hours.Appearance.FillStyle.MainColor = Drawing.Color.Green

                    cs_under.Appearance.FillStyle.FillType = Styles.FillType.Solid
                    cs_under.Appearance.FillStyle.MainColor = Drawing.Color.Blue

                    cs_over.Appearance.FillStyle.FillType = Styles.FillType.Solid
                    cs_over.Appearance.FillStyle.MainColor = Drawing.Color.Red

                    cs_hours.Appearance.LabelAppearance.Visible = False
                    cs_under.Appearance.LabelAppearance.Visible = False
                    cs_over.Appearance.LabelAppearance.Visible = False

                    Chart.Series.Add(cs_hours)
                    Chart.Series.Add(cs_under)
                    Chart.Series.Add(cs_over)

                    While dr.Read
                        Dim tm As String = dr.Item(0)
                        Dim hrs As Decimal = dr.Item(1)
                        Dim ehrs As Decimal = dr.Item(2)
                        Dim ah, vh, rh As Decimal
...
                        cs_hours.AddItem(ah, tm, Drawing.Color.Green)
                        cs_under.AddItem(vh, "", Drawing.Color.Blue)
                        cs_over.AddItem(rh, "", Drawing.Color.Red)

                    End While

What I want to do is display the text in the tm field as the label on the x-axis underneath each series of stacked bars.  I really want to display this at an angle, but I think I can work out how this is done, not just how to get the label text to show something other than the number.

David Penny

[David Penny]

Ok - just another RTFM moment - I found the answer in the Help files under How Do I?

[Vladimir Milev]

Hello David Penny,

Glad to hear you sorted this out.

Best wishes,
Vladimir Milev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Yeroon]

Any chance you would share what you have found? I am facing the same problem and the How-to doesnt help me.

Imagine this code. I would like the Terms: 'PAV2010', 'STAGES08' and 'SR2010' to show as YAxis labels:

<telerik:RadChart ID="rchartGlobalStacked" runat="server" DefaultType="StackedBar100"
                            SeriesOrientation="Horizontal" Skin="Office2007" Width="600px" IntelligentLabelsEnabled="true">
                            <PlotArea>
                                <EmptySeriesMessage Visible="True">
                                    <Appearance Visible="True">
                                    </Appearance>
                                </EmptySeriesMessage>
                                <XAxis>
                                    <Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134">
                                        <MajorGridLines Color="134, 134, 134" Width="0" />
                                        <TextAppearance TextProperties-Color="Black">
                                        </TextAppearance>
                                    </Appearance>
                                    <AxisLabel>
                                        <Appearance RotationAngle="270">
                                        </Appearance>
                                        <TextBlock>
                                            <Appearance TextProperties-Color="Black">
                                            </Appearance>
                                        </TextBlock>
                                    </AxisLabel>
                                </XAxis>
                                <YAxis>
                                    <Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134" MinorTick-Color="134, 134, 134">
                                        <MajorGridLines Color="134, 134, 134" />
                                        <MinorGridLines Color="134, 134, 134" />
                                        <TextAppearance TextProperties-Color="Black">
                                        </TextAppearance>
                                    </Appearance>
                                    <AxisLabel>
                                        <Appearance RotationAngle="0">
                                        </Appearance>
                                        <TextBlock>
                                            <Appearance TextProperties-Color="Black">
                                            </Appearance>
                                        </TextBlock>
                                    </AxisLabel>
                                </YAxis>
                                <YAxis2>
                                    <AxisLabel>
                                        <Appearance RotationAngle="0">
                                        </Appearance>
                                    </AxisLabel>
                                </YAxis2>
                                <Appearance>
                                    <FillStyle FillType="Solid" MainColor="">
                                    </FillStyle>
                                </Appearance>
                            </PlotArea>
                            <Series>
                                <telerik:ChartSeries Name="Ingediend" Type="StackedBar100">
                                    <Appearance>
                                        <FillStyle MainColor="LightYellow">
                                        </FillStyle>
                                        <TextAppearance TextProperties-Color="Black">
                                        </TextAppearance>
                                        <Border Color="69, 115, 167" />
                                        <LabelAppearance LabelLocation="Inside"></LabelAppearance>
                                    </Appearance>
                                    <Items>
                                        <telerik:ChartSeriesItem YValue="3" Name="PAV2010">
                                        </telerik:ChartSeriesItem>
                                        <telerik:ChartSeriesItem YValue="31" Name="STAGES08">
                                        </telerik:ChartSeriesItem>
                                        <telerik:ChartSeriesItem YValue="33" Name="SR2010">
                                        </telerik:ChartSeriesItem>

                                    </Items>
                                </telerik:ChartSeries>
                                <telerik:ChartSeries Name="VB" Type="StackedBar100">
                                    <Appearance>
                                        <FillStyle MainColor="#bfdbff">
                                        </FillStyle>
                                        <TextAppearance TextProperties-Color="Black">
                                        </TextAppearance>
                                        <Border Color="107, 70, 68" />
                                        <LabelAppearance LabelLocation="Inside"></LabelAppearance>
                                    </Appearance>
                                    <Items>
                                        <telerik:ChartSeriesItem YValue="13" Name="PAV2010">
                                        </telerik:ChartSeriesItem>
                                        <telerik:ChartSeriesItem YValue="21" Name="STAGES08">
                                        </telerik:ChartSeriesItem>
                                        <telerik:ChartSeriesItem YValue="23" Name="SR2010">
                                        </telerik:ChartSeriesItem>

                                    </Items>
                                </telerik:ChartSeries>
                                <telerik:ChartSeries Name="DB" Type="StackedBar100">
                                    <Appearance>
                                        <FillStyle MainColor="#f7941e">
                                        </FillStyle>
                                        <TextAppearance TextProperties-Color="Black">
                                        </TextAppearance>
                                        <Border Color="136, 166, 78" />
                                        <LabelAppearance LabelLocation="Inside"></LabelAppearance>
                                    </Appearance>
                                    <Items>
                                        <telerik:ChartSeriesItem YValue="23" Name="PAV2010">
                                        </telerik:ChartSeriesItem>
                                        <telerik:ChartSeriesItem YValue="11" Name="STAGES08">
                                        </telerik:ChartSeriesItem>
                                        <telerik:ChartSeriesItem YValue="13" Name="SR2010">
                                        </telerik:ChartSeriesItem>

                                    </Items>
                                </telerik:ChartSeries>
                                <telerik:ChartSeries Name="Budget" Type="StackedBar100">
                                    <Appearance>
                                        <FillStyle MainColor="#8cc63f">
                                        </FillStyle>
                                        <TextAppearance TextProperties-Color="Black">
                                        </TextAppearance>
                                        <Border Color="113, 88, 143" />
                                        <LabelAppearance LabelLocation="Inside"></LabelAppearance>
                                    </Appearance>
                                    <Items>
                                        <telerik:ChartSeriesItem YValue="15" Name="PAV2010">
                                        </telerik:ChartSeriesItem>
                                        <telerik:ChartSeriesItem YValue="12" Name="STAGES08">
                                        </telerik:ChartSeriesItem>
                                        <telerik:ChartSeriesItem YValue="18" Name="SR2010">
                                        </telerik:ChartSeriesItem>

                                    </Items>
                                </telerik:ChartSeries>
                            </Series>
                            <Appearance>
                                <Border Color="134, 134, 134" />
                            </Appearance>
                            <ChartTitle>
                                <Appearance>
                                    <FillStyle MainColor="">
                                    </FillStyle>
                                </Appearance>
                                <TextBlock Text="Budgetoverzicht per regeling">
                                    <Appearance TextProperties-Color="Black" TextProperties-Font="Arial, 18px">
                                    </Appearance>
                                </TextBlock>
                            </ChartTitle>
                            <Legend>
                                <Appearance Dimensions-Margins="15%, 2%, 1px, 1px" Dimensions-Paddings="2px, 8px, 6px, 3px">
                                    <ItemTextAppearance TextProperties-Color="Black">
                                    </ItemTextAppearance>
                                    <ItemMarkerAppearance Figure="Square">
                                    </ItemMarkerAppearance>
                                </Appearance>
                            </Legend>
                        </telerik:RadChart>

It will now show as 1,2 and 3 labels. See attachmed image

[Ves]

Hi Yeroon,

I believe David meant this article. Did you have any specific issues implementing that approach?

Greetings,
Ves
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Samuel Santiago]

I am seeing the same  behavior with a Chart using Data Binding.  The article referenced above seems to be more related to when you hard code the X-axis.  I want the X-axis to be data driven.  I set the DataLabelsColumn to be one of my column Names, but I still only see numbers across the X-axis.  I am executing code such as this in the NeedDataSource handler:

 chart.Series[0].DataYColumn = "Count";

  chart.PlotArea.XAxis.DataLabelsColumn = "State";

Thanks,

Sam

Any help greatly appreciated.

[Ves]

Hello Samuel Santiago,

Setting the XAxis.DataLabelsColumn property should suffice. Please, make sure there is actually a column names "State" in the datasource. If the issue remains, please send us a small example, reproducing it, so we can investigate it locally. Thanks.

Regards,
Ves
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.