Search results

Range Column

Range

Like the column chart, but shows the variations in the data values for a given time using vertical bars. To render a range column series, use series Type as RangeColumn.

rangecolumn.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%"> 
        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis> 
  
        <ChartSeriesCollection> 
            <ChartSeries DataSource="@WeatherReports1" XName="X" High="High" Low="Low" Width="2" Type="ChartSeriesType.RangeColumn">
            </ChartSeries> 
            <ChartSeries DataSource="@WeatherReports2" XName="X" High="High" Low="Low" Width="2" Type="ChartSeriesType.RangeColumn">
            </ChartSeries> 
        </ChartSeriesCollection> 
</EjsChart> 

@code{
    public class ChartData
    {
        public string X;
        public double Low;
        public double High;
    }
    public List<ChartData> WeatherReport1 = new List<ChartData> 
    {
         new ChartData { X= "Sun", Low= 3.1, High= 10.8 },
         new ChartData { X= "Mon", Low= 5.7, High= 14.4 },
         new ChartData { X= "Tue", Low= 8.4, High= 16.9 },
         new ChartData { X= "Wed", Low= 10.6, High= 19.2 },
         new ChartData { X= "Thu", Low= 8.5, High= 16.1 },
         new ChartData { X= "Fri", Low= 6.0, High= 12.5 },
         new ChartData { X= "Sat", Low= 1.5, High= 6.9 }
    };

    public List<ChartData> WeatherReport2 = new List<ChartData> 
    {
         new ChartData { X= "Sun", Low= 2.5, High= 9.8 },
         new ChartData { X= "Mon", Low= 4.7, High= 11.4 },
         new ChartData { X= "Tue", Low= 6.4, High= 14.4 },
         new ChartData { X= "Wed", Low= 9.6, High= 17.2 },
         new ChartData { X= "Thu", Low= 7.5, High= 15.1 },
         new ChartData { X= "Fri", Low= 3.0, High= 10.5 },
         new ChartData { X= "Sat", Low= 1.2, High= 7.9 }
    };
}

Range Column

Customization

You can use the following properties to customize the range column series.

  • Fill – used to change the color of the range column.
  • Opacity – used to control the transparency of the chart series.
  • DashArray – used to render range column series with dashes.
  • Border – used to render range column with border.
  • ColumnSpacing – used to render range column series between space.
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%">
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports1" XName="X" High="High" Low="Low" Fill="blue"     ColumnSpacing="0.2" Opacity="0.7" Type="ChartSeriesType.RangeColumn">
        </ChartSeries>
        <ChartSeries DataSource="@WeatherReports2" XName="X" High="High" Low="Low" Fill="green"     ColumnSpacing="0.2" Opacity="0.7" Type="ChartSeriesType.RangeColumn">
        </ChartSeries>
    </ChartSeriesCollection>
</EjsChart>

@code{
    public class ChartData
    {
        public string X;
        public double Low;
        public double High;
    }
    public List<ChartData> WeatherReport1 = new List<ChartData>
    {
         new ChartData { X= "Sun", Low= 3.1, High= 10.8 },
         new ChartData { X= "Mon", Low= 5.7, High= 14.4 },
         new ChartData { X= "Tue", Low= 8.4, High= 16.9 },
         new ChartData { X= "Wed", Low= 10.6, High= 19.2 },
         new ChartData { X= "Thu", Low= 8.5, High= 16.1 },
         new ChartData { X= "Fri", Low= 6.0, High= 12.5 },
         new ChartData { X= "Sat", Low= 1.5, High= 6.9 }
    };

    public List<ChartData> WeatherReport2 = new List<ChartData>
    {
         new ChartData { X= "Sun", Low= 2.5, High= 9.8 },
         new ChartData { X= "Mon", Low= 4.7, High= 11.4 },
         new ChartData { X= "Tue", Low= 6.4, High= 14.4 },
         new ChartData { X= "Wed", Low= 9.6, High= 17.2 },
         new ChartData { X= "Thu", Low= 7.5, High= 15.1 },
         new ChartData { X= "Fri", Low= 3.0, High= 10.5 },
         new ChartData { X= "Sat", Low= 1.2, High= 7.9 }
    };
}

Custom Range Column

See Also