Bar Chart

A Bar chart displays data as horizontal bars whose lengths vary according to their value. You can use a Bar chart to show a comparison between several sets of data (for example, summaries of sales data for different time periods). Each series is automatically colored differently for easier reading.

Bar chart. Results from the first code snippet below

This article assumes you are familiar with the chart basics and data binding.

To create a bar chart:

  1. add a TelerikChartSeries to the TelerikChartSeriesItems collection
  2. set its Type property to ChartSeriesType.Bar
  3. provide a data collection to its Data property
  4. optionally, provide data for the x-axis Categories

A bar chart that shows product revenues

@using Telerik.Blazor
@using Telerik.Blazor.Components.Chart

<TelerikChart>
    <TelerikChartSeriesItems>
        <TelerikChartSeries Type="ChartSeriesType.Bar" Name="Product 1" Data="@series1Data">
        </TelerikChartSeries>
        <TelerikChartSeries Type="ChartSeriesType.Bar"Name="Product 2" Data="@series2Data">
        </TelerikChartSeries>
    </TelerikChartSeriesItems>

    <TelerikChartCategoryAxes>
        <TelerikChartCategoryAxis Categories="@xAxisItems"></TelerikChartCategoryAxis>
    </TelerikChartCategoryAxes>

    <TelerikChartTitle Text="Quarterly revenue per product"></TelerikChartTitle>

    <TelerikChartLegend Position="ChartLegendPosition.Right">
    </TelerikChartLegend>
</TelerikChart>

@code {
    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}

Bar Chart Specific Appearance Settings

Color

The color of a series is controlled through the Color property that can take any valid CSS color (for example, #abcdef, #f00, or blue). The color control the fill color of the area.

Color Field

Bar and Column charts can take the color of the series item from the ColorField of the data source. You can pass a valid CSS color (for example, #abcdef, #f00, or blue).

@using Telerik.Blazor
@using Telerik.Blazor.Components.Chart

<TelerikChart>
    <TelerikChartSeriesItems>
        <TelerikChartSeries Type="ChartSeriesType.Bar" Data="@theData" ColorField="@nameof(MyChartDataModel.Color)"
                            Field="@nameof(MyChartDataModel.ItemValue)" CategoryField="@nameof(MyChartDataModel.Category)">
        </TelerikChartSeries>
    </TelerikChartSeriesItems>

    <TelerikChartTitle Text="Revenue per product"></TelerikChartTitle>

    <TelerikChartLegend Position="ChartLegendPosition.Right">
    </TelerikChartLegend>
</TelerikChart>

@code {
    public class MyChartDataModel
    {
        public string Category { get; set; }
        public double ItemValue { get; set; }
        public string Color { get; set; }
    }
    public List<MyChartDataModel> theData = new List<MyChartDataModel>
{
        new MyChartDataModel
        {
            Category = "Product 1",
            ItemValue = 2,
            Color = "red"
        },
        new MyChartDataModel
        {
            Category = "Product 2",
            ItemValue = 3,
            Color = "#00ff00"
        },
        new MyChartDataModel
        {
            Category = "Product 3",
            ItemValue = 4,
            Color = "#00f"
        }
    };
}

The result from the code snippet above

Gap and Spacing

You can control the distance between the categories that cluster a data point from each series. To do this, use the Gap property of the series. It is the distance between categories expressed as a percentage of the bar width.

To set the distance between the bars of different series in the same category, use the Spacing property. It is the space between the series items in one series category as a proportion of the width of a single series item.

To create overlap, set negative values.

You can configure the values of Gap and Spacing for the whole chart in the first series and they are applied for all categories and series items.

Configuring Gap and Spacing in a Column chart. 'g' and 's' are the values of Gap and Spacing respectively and 'x' is the width of the series item. For this chart g = 2 and s = 1.

See Also

In this article
Not finding the help you need? Improve this article