Is it possible to have a stacked graph where the y axis labels only show to inticate teh top of each part of the stack, eg 143 then next shows at 159 (based ont eh 2nd value of 16) and so on?
I thought, seeing as you can specify each "series" step that it might be doable but its not working for me
Here is a snapshot of my code: graphEmailAlerts.DataSource = eAdatatable
graphEmailAlerts.DataBind()
graphEmailAlerts.Visible = True
graphEmailAlerts.Appearance.FillStyle.BackgroundColor = Drawing.Color.Transparent
'Y axis
graphEmailAlerts.PlotArea.YAxis.AxisCrossingValue = 0
graphEmailAlerts.PlotArea.YAxis.Color = Drawing.Color.Black
graphEmailAlerts.PlotArea.YAxis.MajorTickType = HtmlChart.TickType.Outside
graphEmailAlerts.PlotArea.YAxis.MinorTickType = HtmlChart.TickType.None
Dim totalvalue = eAdatatable.Rows(0).Item("value1") + eAdatatable.Rows(0).Item("value2") + eAdatatable.Rows(0).Item("value3")
graphEmailAlerts.PlotArea.YAxis.MinValue = 0
graphEmailAlerts.PlotArea.YAxis.MaxValue = CDec((Math.Ceiling((totalvalue * 1.2) / 100) * 100))
graphEmailAlerts.PlotArea.YAxis.LabelsAppearance.DataFormatString = "{0} "
graphEmailAlerts.PlotArea.YAxis.LabelsAppearance.RotationAngle = "0"
graphEmailAlerts.PlotArea.YAxis.LabelsAppearance.Skip = "0"
'X-axis
graphEmailAlerts.PlotArea.XAxis.AxisCrossingValue = 0
graphEmailAlerts.PlotArea.XAxis.Color = Drawing.Color.Black
graphEmailAlerts.PlotArea.XAxis.MajorTickType = HtmlChart.TickType.Outside
graphEmailAlerts.PlotArea.XAxis.MinorTickType = HtmlChart.TickType.None
graphEmailAlerts.PlotArea.XAxis.DataLabelsField = "type"
graphEmailAlerts.PlotArea.XAxis.Reversed = False
graphEmailAlerts.PlotArea.XAxis.BaseUnit = HtmlChart.DateTimeBaseUnit.Auto
graphEmailAlerts.PlotArea.XAxis.LabelsAppearance.DataFormatString = "{0} "
graphEmailAlerts.PlotArea.XAxis.LabelsAppearance.RotationAngle = "0"
graphEmailAlerts.PlotArea.XAxis.LabelsAppearance.Skip = "0"
graphEmailAlerts.PlotArea.XAxis.LabelsAppearance.Step = "1"
graphEmailAlerts.PlotArea.Series.Clear()
Dim cs_ss As New ColumnSeries()
cs_ss.Stacked = "true"
cs_ss.DataFieldY = "value1"
cs_ss.LabelsAppearance.Step = eAdatatable.Rows(0).Item("value1")
cs_ss.LabelsAppearance.Position = HtmlChart.BarColumnLabelsPosition.Center
cs_ss.LabelsAppearance.DataFormatString = "Saved Searches {0}"
cs_ss.Appearance.FillStyle.BackgroundColor = Drawing.Color.FromArgb(165, 213, 162)
cs_ss.TooltipsAppearance.DataFormatString = "Saved Searches {0}"
graphEmailAlerts.PlotArea.Series.Add(cs_ss)
If eAdatatable.Rows(0).Item("value2") <> 0 Then
Dim cs_tracked As New ColumnSeries()
cs_tracked.Name = "Tracked"
cs_tracked.Stacked = "true"
cs_tracked.DataFieldY = "value2"
cs_tracked.LabelsAppearance.Position = HtmlChart.BarColumnLabelsPosition.Center
cs_tracked.LabelsAppearance.DataFormatString = "Tracked {0}"
cs_tracked.Appearance.FillStyle.BackgroundColor = Drawing.Color.FromArgb(255, 181, 110)
cs_tracked.TooltipsAppearance.DataFormatString ="Tracked {0}"
cs_tracked.LabelsAppearance.Step = eAdatatable.Rows(0).Item("value1") + eAdatatable.Rows(0).Item("value2")
graphEmailAlerts.PlotArea.Series.Add(cs_tracked)
End If1 Answer, 1 is accepted
0
Cheryl
Top achievements
Rank 1
Iron
Rank 1
Iron
answered on 14 Aug 2023, 08:07 PM
| edited on 14 Aug 2023, 08:16 PM
Thanks Doncho,
I was hoping for an easier solution but I have managed to get a solution so for anyone else the needs this odd requirement:
- hide the original Y axis, then add 3 new Y axises on left (a, b & c)
- colour the lines for the second two (b & c) to be white to hide them,
- add a margin to move the labels over for b & c so they are lined up with the first yaxis added.
I then did it again to add the categories to right.
Just a note if anyone needs to do this, the order of adding the axis and then customising them is specific, ie I had to add left, right, left, right, left right. and when customising them had to refer to the right one first for some reason.
here is a snippet of the first left & right added, note that I added the left one then the right one:If eAdatatable.Rows(0).Item("value1") <> 0 Then
Dim AxisYSS As AxisY = New AxisY()
AxisYSS.Name = "SS_left"
AxisYSS.MinValue = 0
AxisYSS.MaxValue = CDec((Math.Ceiling((totalvalue * 1.2) / 100) * 100))
AxisYSS.Color = Drawing.Color.Black
AxisYSS.MajorTickType = HtmlChart.TickType.None
AxisYSS.MajorTickSize = 7
AxisYSS.AxisCrossingValue = 0
AxisYSS.Step = Decimal.Parse(eAdatatable.Rows(0).Item("value1"))
Dim AxisYSS_right As AxisY = New AxisY()
AxisYSS_right.Name = "SS_right"
AxisYSS_right.MinValue = 0
AxisYSS_right.MaxValue = CDec((Math.Ceiling((totalvalue * 1.2) / 100) * 100))
AxisYSS_right.Color = Drawing.Color.Black
AxisYSS_right.MajorTickType = HtmlChart.TickType.None
AxisYSS_right.AxisCrossingValue = 1
AxisYSS_right.Step = Decimal.Parse(eAdatatable.Rows(0).Item("value1"))
graphEmailAlerts.PlotArea.AdditionalYAxes.Add(AxisYSS)
graphEmailAlerts.PlotArea.AdditionalYAxes.Add(AxisYSS_right)
graphEmailAlerts.PlotArea.XAxis.AxisCrossingPoints.Add(0)
graphEmailAlerts.PlotArea.XAxis.AxisCrossingPoints.Add(1)
End If
function onLoad(chart) {
var axisnumber = 0;
var widget = chart.get_kendoWidget();
//left axis
var AxisSSRight = widget.getAxis("SS_right");
if (AxisSSRight != undefined) {
axisnumber = axisnumber + 1;
widget.options.valueAxis[axisnumber].labels.template = "#if (value == 0) {# #} else {# – Saved Searches #} #";
widget.options.valueAxis[axisnumber].labels.margin = -4;
}
//var chart1 = widget.getAxis("kendoChart");
var AxisSSLeft = widget.getAxis("SS_left");
if (AxisSSLeft != undefined)
{
axisnumber = axisnumber + 1;
//widget.options.valueAxis[axisnumber].axisCrossingValues = 0;
widget.options.valueAxis[axisnumber].labels.template = "#if (value == 0) {# #} else {# #=value# – #} #";
widget.options.valueAxis[axisnumber].labels.margin = -4;
}
var AxisTrackedRight = widget.getAxis("Tracked_right");
if (AxisTrackedRight != undefined) {
axisnumber = axisnumber + 1;
widget.options.valueAxis[axisnumber].labels.template = "#if (value == 0) {# #} else {# – Tracked#} #";
widget.options.valueAxis[axisnumber].line.color = "#ffffff";
widget.options.valueAxis[axisnumber].labels.margin = -112;
}
var AxisTrackedLeft = widget.getAxis("Tracked_left");
if (AxisTrackedLeft != undefined)
{
axisnumber = axisnumber + 1;
widget.options.valueAxis[axisnumber].labels.template = "#if (value == 0) {# #} else {# #=value # – #} #";
widget.options.valueAxis[axisnumber].line.color = "#ffffff";
widget.options.valueAxis[axisnumber].labels.margin = -45;
}
var AxisAllocatedRight = widget.getAxis("Allocated_right");
if (AxisAllocatedRight != undefined) {
axisnumber = axisnumber + 1;
widget.options.valueAxis[axisnumber].labels.template = "#if (value == 0) {# #} else {# – Allocated #} #";
widget.options.valueAxis[axisnumber].line.color = "#ffffff";
widget.options.valueAxis[axisnumber].labels.margin = -128;
}
var AxisAllocatedLeft = widget.getAxis("Allocated_left");
if (AxisAllocatedLeft != undefined) {
axisnumber = axisnumber + 1;
widget.options.valueAxis[axisnumber].labels.template = "#if (value == 0) {# #} else {# #=value # – #} #";
widget.options.valueAxis[axisnumber].line.color = "#ffffff";
widget.options.valueAxis[axisnumber].labels.margin = -62;
}
chart.repaint();
}
Doncho
commented on 15 Aug 2023, 06:22 AM
Telerik team
Thank you for sharing this approach with the community!
I converted your comment to a forum answer to make the thread better structured.
I would assume that you would like to display just the total value of each stack but not separately for the series inside.
As of R1 2017, the stackValue property can be used to get the total of the stack in a label. See:
In short, you can evaluate the stack value directly in the ClientTemplate of the Series label:
<LabelsAppearance> <ClientTemplate>Total: #= stackValue #</ClientTemplate> </LabelsAppearance>Please let me know if any questions come up or if I misunderstood the question in any way.
thank you for your reply Doncho.
It wasn't quite what I meant. The graph will always on have one stack. Looking at the below example, on the axis, instead of it showing the labels every 5 steps, I want to only show the labels at 10, 22 and 35. Is this possible?
Thank you for the clarification Cheryl!
Unfortunately, RadHtmlChart has no built-in functionality for customizing the labels of the Y axis. What you can do is to review the options for custom implementations suggested by Rumen in his reply to your other thread: