Column Chart

A Column chart displays data as vertical bars whose heights vary according to their value. You can use a Column 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.

Column chart. Results from the first code snippet below

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

To create a column chart:

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

A column chart that shows product revenues

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

<TelerikChart>
    <TelerikChartSeriesItems>
        <TelerikChartSeries Type="ChartSeriesType.Column" Name="Product 1" Data="@series1Data">
        </TelerikChartSeries>
        <TelerikChartSeries Type="ChartSeriesType.Column"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" };
}

Column 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