Components / Chart / Types

New to Telerik UI for Blazor? Download free 30-day trial

Range Column Chart

The Blazor Range Column Chart displays data as vertical bars whose position and height vary according to pairs of from and to values. You can use a Range Column Chart to show a comparison between several sets of data (for example, summaries of quantities or measurements for different time periods). Each series is automatically colored differently for easier perception. The Range Column Chart is similar to the Column Chart, which can be regarded as a Range Column Chart with zero from values.

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

Creating Blazor Range Column Chart

  1. Add a ChartSeries to the ChartSeriesItems collection.
  2. Set the series Type parameter to ChartSeriesType.RangeColumn.
  3. Provide a data collection to its Data property. You can use a collection of arrays or a collection of custom objects.
  4. If the Range Column data is a collection of arrays, provide data for the Categories parameter of the ChartCategoryAxis.
  5. (optional) Set Visible="true" or define label Template for <ChartSeriesLabelsFrom> or <ChartSeriesLabelsTo>. These are nested tags inside <ChartSeriesLabels> of the respective <ChartSeries>.

Binding Range Column Series to Collection of Arrays

Set the ChartSeries Data parameter to a List of arrays or a jagged array (an array of arrays). The inner arrays must have two members—one for the smaller from value, and one for the greater to value.

Set the Categories parameter of the ChartCategoryAxis to object[]. The members of this array will be used as labels for the category axis in their respective order.

Blazor Range Column Chart bound to arrays

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Name="University 1"
                     Data="@StudentScores1"
                     Type="ChartSeriesType.RangeColumn">
            <ChartSeriesLabels>
                <ChartSeriesLabelsFrom Visible="true" />
                <ChartSeriesLabelsTo Visible="false" />
            </ChartSeriesLabels>
        </ChartSeries>
        <ChartSeries Name="University 2"
                     Data="@StudentScores2"
                     Type="ChartSeriesType.RangeColumn">
            <ChartSeriesLabels>
                <ChartSeriesLabelsFrom Visible="true" Template="#= dataItem[0] #" />
                <ChartSeriesLabelsTo Visible="true" Template="#= dataItem[1] #" />
            </ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@Years" />
    </ChartCategoryAxes>

    <ChartTooltip Visible="true">
        <Template>
            @{
                var item = (int[])context.DataItem;
                <span>@item[0] - @item[1] points</span>
            }
        </Template>
    </ChartTooltip>

    <ChartTitle Text="Exam Score Ranges"></ChartTitle>

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

@code {
    // The RangeColumn Series Data can be any collection of arrays
    private List<int[]> StudentScores1 { get; set; } = new List<int[]>();
    private int[][] StudentScores2 { get; set; } = new int[5][];

    private object[] Years { get; set; }

    protected override void OnInitialized()
    {
        var thisYear = DateTime.Now.Year;
        Years = new object[] { thisYear - 4, thisYear - 3, thisYear - 2, thisYear - 1, thisYear };

        var rnd = new Random();
        List<int[]> tempData1 = new List<int[]>();
        List<int[]> tempData2 = new List<int[]>();

        for (int i = 1; i <= Years.Count(); i++)
        {
            int randomValue = rnd.Next(30, 50);
            tempData1.Add(new int[] { randomValue, randomValue + 30 });
            tempData2.Add(new int[] { randomValue + 10, randomValue + 40 });
        }

        StudentScores1 = tempData1;
        StudentScores2 = tempData2.ToArray();

        base.OnInitialized();
    }
}

Binding Range Column Series to Custom Objects

  1. Set the ChartSeries Data parameter to an IEnumerable<T>.
  2. Set the FromField, ToField, and CategoryField parameters of the ChartSeries to properties of the T type.

Blazor Range Column Chart bound to custom objects

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Name="University 1"
                     Data="@StudentScoreList1"
                     Type="ChartSeriesType.RangeColumn"
                     FromField="@nameof(ScoreModel.LowScore)"
                     ToField="@nameof(ScoreModel.HighScore)"
                     CategoryField="@nameof(ScoreModel.Year)">
            <ChartSeriesLabels>
                <ChartSeriesLabelsFrom Visible="true" />
                <ChartSeriesLabelsTo Visible="false" />
            </ChartSeriesLabels>
        </ChartSeries>
        <ChartSeries Name="University 2"
                     Data="@StudentScoreList2"
                     Type="ChartSeriesType.RangeColumn"
                     FromField="@nameof(ScoreModel.LowScore)"
                     ToField="@nameof(ScoreModel.HighScore)"
                     CategoryField="@nameof(ScoreModel.Year)">
            <ChartSeriesLabels>
                <ChartSeriesLabelsFrom Visible="true" Template="#= dataItem.LowScore #" />
                <ChartSeriesLabelsTo Visible="true" Template="#= dataItem.HighScore #" />
            </ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>

    <ChartTooltip Visible="true">
        <Template>
            @{
                var item = (ScoreModel)context.DataItem;
                <span>@item.LowScore - @item.HighScore points</span>
            }
        </Template>
    </ChartTooltip>

    <ChartTitle Text="Exam Score Ranges"></ChartTitle>

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

@code {
    private List<ScoreModel> StudentScoreList1 { get; set; } = new List<ScoreModel>();
    private List<ScoreModel> StudentScoreList2 { get; set; } = new List<ScoreModel>();

    protected override void OnInitialized()
    {
        var thisYear = DateTime.Now.Year;

        var rnd = new Random();

        for (int i = 1; i <= 5; i++)
        {
            int randomValue = rnd.Next(30, 50);

            StudentScoreList1.Add(new ScoreModel()
            {
                Year = thisYear - 4 + i,
                LowScore = randomValue,
                HighScore = randomValue + 30
            });

            StudentScoreList2.Add(new ScoreModel()
            {
                Year = thisYear - 4 + i,
                LowScore = randomValue + 10,
                HighScore = randomValue + 40
            });
        }

        base.OnInitialized();
    }

    public class ScoreModel
    {
        public int Year { get; set; }
        public int LowScore { get; set; }
        public int HighScore { get; set; }
    }
}

Column Chart Specific Appearance Settings

Labels

Each data item is decorated with a text label. You can control and customize them through the <ChartCategoryAxisLabels /> and its children tags.

  • Visible—Hide all labels by setting this parameter to false.
  • Step—Renders every n-th label, where n is the value (double number) passed to the parameter.
  • Skip—Skips the first n labels, where n is the value (double number) passed to the parameter.
  • Angle—Rotates the labels with the desired angle by n degrees, where n is the value passed to the parameter. It can take positive and negative numbers. To set this parameter, use the < ChartCategoryAxisLabelsRotation /> child tag.

To rotate the markers, use the ChartCategoryAxisLabelsRotation child tag and set its Angle parameter. It can take positive and negative numbers as values.

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).

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).

Colors per series item

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

    <ChartTitle Text="Revenue per product" />

    <ChartLegend Position="ChartLegendPosition.Right" />
</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"
        }
    };
}

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.

Customize Chart Elements - Nested Tags Settings

When configuring nested properties and child elements in your chart, the inner tags will contain their parent tag name and add specifics to its end. In general the structure of such nested tags will be <Chart*Category**Specifics*> where the Category can be one of the following:

  • CategoryAxis
  • ChartArea
  • Legend
  • PlotArea
  • SeriesItems
  • Title
  • Tooltip
  • ValueAxis
  • XAxes
  • YAxes
  • and others

To customize the chart, look for nested tags and their properties - the inner tags will contain their parent tag name and add specifics to its end. For example, the ChartSeries tag has a ChartSeriesLabels tag that exposes configuration options and more child tags.

An example of this is the rotation the Labels of a categorical chart. You can use the

ChartCategoryAxes > ChartCategoryAxis > ChartCategoryAxisLabels > ChartCategoryAxisLabelsRotation tag

and set the Angle property to the desired value in degrees (they might be negative or positive numbers). By using similar approach you can take control over ChartCategoryAxisLabelsMargin (add margin for top, bottom, left and right), ChartCategoryAxisLabelsPadding (add padding for top, bottom, left and right) and others.

This approach is not limited only to the Labels - it can be used with all tags that are applicable for the chart type, for example the Chart Title ChartTitle > ChartTitleMargin.

See Also

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