Hi,
I want to be able to hide the category axis on a line chart that doesn't have any data. Please see the attached; as you can see, there are a lot of dates in the middle that don't have any data as there isn't a point plotted, yet the date is still shown in the category axis and there is space reserved for it in the actual graph.
This looks untidy so we need to be able to hide all of the dates that don't have any data/a point. So for example anything from the 9th of July to the 19th of August should be completely hidden from the chart. How can we achieve this?
The current code:
<code>
Html.Kendo().Chart(Model.OutletColdTemperatures)
.Name("OutletTemperatureMonitoringCold") // The name/ID.
.ChartArea(chartArea => chartArea.Background("#ADD8E6")) // Background colour.
.Title(title => title
.Text("Cold Temperatures") // Control the title at the top of the graph.
.Color("#2E5A78")
.Font("bold 24px Arial, Helvetica, sans-serif")
.Position(ChartTitlePosition.Top)
)
.DataSource(ds => ds
.Group(g => g.Add(d => d.SystemRef)) // This tells it to create a new/group each line by the System Ref.
.Sort(g => g.Add(d => d.SystemRef))
)
.SeriesDefaults(seriesDefaults => seriesDefaults
.Line().Style(ChartLineStyle.Smooth) // This controls the type of line shown.
)
.Series(series => series
.Line(value => value.Temp, date => date.Recorded) // This controls the line written out.
.Name("#: group.value #") // Control the value shown in the Key/Legend.
.Labels(labels => labels.Visible(false)) // Hide temperatures on the graph.
.MissingValues(ChartLineMissingValues.Interpolate) // Control how missing values are shown.
)
.CategoryAxis(axis => axis // This controls the category at the bottom. Currently shows the date.
.Title("Date")
.Type(ChartCategoryAxisType.Date)
.Categories(c => c.Recorded)
.Labels(labels => labels
.Rotation(-65) // Rotate the text around.
.Template("#: value.toLocaleDateString() #") // Format the date shown.
)
)
.ValueAxis(axis => axis // This controls the value at the left side. Currently shows the temperature.
.Numeric()
.Title("Temperature °C")
.PlotBands(p => p
.Add(10, 10.2, "#FF0000")
)
.Max(20) // Set the maximum value shown at the top of the graph.
)
.Legend(legend => legend // This controls the Key/Legend. Currently shows the Outlet System Ref.
.Visible(false)
.Position(ChartLegendPosition.Bottom)
.Labels(x => x.Font(font: "9px Arial, Helvetica, sans-serif").Template("#: text #"))
)
.Tooltip(tooltip => tooltip // Add a tooltip showing the Outlet details.
.Visible(true)
.Template(tooltipTemplate)
)
.Events(events => events
.DataBound("OnDataBound_OutletTemperatureMonitoring")
)
</code>
Any help would be appreciated. I think the same question has been answered here, however the response was a couple years ago: www.telerik.com/forums/hide-labels-on-date-axis-that-have-no-data#BFCuWHL3s0i8c7DX1uPcdw
Thanks
Hi,
You can do that by setting the Labels Step option. Its value should be the number of labels minus 1. So for example, if you have 10 labels set Step to 9:
.CategoryAxis(axis => axis .Categories("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011") .MajorGridLines(lines => lines.Visible(false)) .Labels(l => l.Step(9)) )
I will let Ivan that the recommended approach is a working solution as per the needs of your application.
If any further assistance is needed, do not hesitate to contact the team.
Kind Regards,
Anton Mironov