Hello I'm creating a graph like the attached image.
The problem is that x axis is really close to each other and label information cant be displayed well.
I wonder if its possible to keep the graph as it is, but only display the label and vertical line every 3 elements, one important thing is that I can not only remove the information, I just want to hide the label and vertical line but keep the information (the pink in the attached image).
Here is the code to display the graph:
<RadCartesianChart
row = "0"
height = "150px"
backgroundColor = "transparent"
class = "center-graph android-heat"
showLabels = "false">
<SplineAreaSeries
tkCartesianSeries
selectionMode = "None"
seriesName = "Area"
[items] = "stats.heatHours[0]"
categoryProperty = "hour"
valueProperty = "popular"
stackMode = "None">
</SplineAreaSeries>
<RadCartesianChartGrid
tkCartesianGrid
horizontalLinesVisible = "false"
horizontalStripLinesVisible = "false"
horizontalStrokeWidth = "1"
horizontalStrokeColor = "#000"
verticalLinesVisible = "true"
verticalStripLinesVisible = "false"
verticalStrokeColor = "#a0a0a0"
verticalStrokeWidth = "1">
</RadCartesianChartGrid>
<CategoricalAxis
tkCartesianHorizontalAxis
labelTextColor = "#000"
labelSize = "10"
lineThickness = "1"
lineColor = "#a0a0a0">
</CategoricalAxis>
<LinearAxis
tkCartesianVerticalAxis
[maximum] = "getBiggestHeat(0)"
lineThickness = "1"
hidden = "true"
horizontalLocation = "Right"
lineHidden = "false">
</LinearAxis>
<Palette
tkCartesianPalette
showLabels = "false"
seriesName = "Area">
<PaletteEntry
tkCartesianPaletteEntry
fillColor = "#FF007F"
strokeColor = "#FF0049">
</PaletteEntry>
</Palette>
</RadCartesianChart>
5 Answers, 1 is accepted
Yes, you can show each third tick label on your horizontal axis and meanwhile preserve all the information the graph is visualizing as in the initial state. To achieve that you need to use majorTickInterval with a number value that shows how often your want your ticks visualized on the Axis.
E.g., set the majorTickInterval with a value of 3 to show each third tick.
<CategoricalAxis tkCartesianHorizontalAxis majorTickInterval="3"></CategoricalAxis>Now your horizontal categorical axis will show only each third label. More about this feature be found in this documentation article.
Regards,
Nikolay Iliev
Telerik by Progress
Rank 1
Hello, and thank you for your answer.
I tried you solution and works fine on android, but IOS is not working.
In the attached image you can see the result in IOS.
Thank you for reporting this issue! I've tested it on my side and indeed at this moment, the majorTickInterval does not work for iOS. I have created a bug report and logged it here. The reason for this is because currently the majorTickPoprety for TKChartCategoricalAxis is a read-only property and can not assign custom values. This was done about two years ago to prevent some possible performance issue related to setting big value for this property.
However, our developers will discuss the possibilities for implementing this property for iOS and will log the information in the bug report issue posted above. You can track the issue for updates and information - I am also awarding you 1000 Telerik points for posting this bug to us.
Regards,
Nikolay Iliev
Telerik by Progress
Rank 1
Hi there.
Thank you so much for your answer.
Is there any workaround to display the information as I mentioned at the top of this post?
Regards.
At this very moment, the only thing you can do is to apply styling to your Labels, and this way create an acceptable iOS design for your horizontal axis values. (e.g. creating rotated labels with
labelRotationAngle)The proper way to reduce the number of the values that are showing would be majorTickProperty but as this property is currently read-only assigning custom values is not possible.Currently, I can't think of any other scenario (except for reducing the passed data for iOS, however, this would change the whole chart which I guess is not the main idea).
Once again I am sorry for any inconvenience this issue might caused - we are looking actively into solving it and once our developers have stable solution or workaround it will be posted in the bug report issue.
Regards,
Nikolay Iliev
Telerik by Progress