ASP.NET MVC Bar Chart Overview
The Telerik UI Bar Chart HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Bar Chart widget.
Bar Charts display data by using horizontal or vertical bars whose length varies according to their values. Bar Charts are suitable for displaying a comparison between several sets of data, for example, for showing a summary of unique and total site visitors over a period of time. The series are placed next to each other with predefined spacing between them.
New to Telerik UI for ASP.NET MVC?Start Free TrialBasic Configuration
To create the Bar Chart, provide it with a Name. Optionally, set the width and height of the desired chart by using CSS.
Razor
@(Html.Kendo().Chart()
.Name("chart")
.Title("Site Visitors Stats")
.Subtitle("/thousands/")
.Legend(legend => legend
.Visible(false)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.Series(series =>
{
series.Bar(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
series.Bar(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
})
.CategoryAxis(axis => axis
.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Max(140000)
.Line(line => line.Visible(false))
.MajorGridLines(lines => lines.Visible(true))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name #: #= value #")
)
)Functionality and Features
| Features | Description |
|---|---|
| [Date axis](% slug barcharts_date_axis %) | Scale the date axis of your Bar Chart to get a better visualization of the seasonal data in your app. |
| [Gap and spacing](% slug barcharts_gap_and_spacing %) | The Bar Chart component allows you to control the distance between its categories as well as between series points within a category. This can be done through the series.gap and series.spacing client-side settings of the Chart. |
| [Logarithmic axis](% slug barcharts_logarithmic_axis%) | A logarithmic axis is a special numeric axis that transforms the actual values by using a logarithmic function with a particular base. |
| [Multiple axes](% slug barcharts_multi_axis %) | The Bar chart supports multiple axes. This helps you leverage the best charting performance and visualize data on any number axes to provide solid business reports for your users. |
| [Plotbands](% slug barcharts_plotbands%) | Plot Bands are colored ranges, which are used to highlight certain areas in the Chart. |
| [100% Stacked and Grouped Bars](% slug barcharts_aspnetcore_htmlhelper_stacked100_and_grouped_bars%) | The Bar Chart supports 100% stacking that could be grouped in the same time. |