What’s New in Blazor Charts: 2023 Volume 2

Jollen Moyani - Jul 26 '23 - - Dev Community

Syncfusion Blazor Charts is a well-crafted charting component for visualizing data. It contains a rich UI gallery of 50+ charts and graphs, ranging from line to financial, that cater to all charting scenarios.

In this blog, we’ll see the new features included for the Blazor Charts component in the 2023 Volume 2 release.

New Blazor Range Step Area Chart

The new Blazor Range Step Area Chart is designed to display continuous data points as steps that fluctuate between high and low values over time intervals and across different categories. Unlike the traditional area charts, only the area between the high and low values in the range step area chart is filled with color, and a step line connects the data points.

Blazor Range Step Area Chart

Blazor Range Step Area Chart

Why use a range step area chart?

The Blazor Range Step Area Chart is handy when you need to showcase the variation between minimum and maximum values in data sets, such as temperature or price fluctuations. It allows you to plot data emphasizing gradual changes.

To utilize the Range Step Area Chart effectively, you need to provide the following values as input.

Value

Type

Description

X

Int/Double/String/DateTime

Denotes the x-axis value of the data point.

High

Int/Double

Denotes the high value in the data series.

Low

Int/Double

Denotes the low value in the data series.

Refer to the following code example. In it, we have used the Blazor Range Step Area Chart to visualize the temperature variation in a year.

<SfChart>
 <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
 <ChartSeriesCollection>
  <ChartSeries DataSource="@WeatherReports" XName="X" High="High" Low="Low" Opacity="0.5" Type="ChartSeriesType.RangeStepArea">            
  </ChartSeries>
 </ChartSeriesCollection>
</SfChart>

@code {
    public class ChartData
    {
        public string X { get; set; }
        public double Low { get; set; }
        public double High { get; set; }
    }

    public List<ChartData> WeatherReports = new List<ChartData>
    {
        new ChartData { X= "Jan", High= 29, Low= 22 },
        new ChartData { X= "Feb", High= 32, Low= 22 },
        new ChartData { X= "Mar", High= 35, Low= 25 },
        new ChartData { X= "Apr", High= 37, Low= 27 },
        new ChartData { X= "May", High= 35, Low= 25 },
        new ChartData { X= "Jun", High= 32, Low= 22 },
        new ChartData { X= "Jul", High= 30, Low= 20 },
        new ChartData { X= "Aug", High= 32, Low= 22 },
        new ChartData { X= "Sep", High= 35, Low= 25 },
        new ChartData { X= "Oct", High= 37, Low= 27 },
        new ChartData { X= "Nov", High= 35, Low= 25 },
        new ChartData { X= "Dec", High= 32, Low= 22 }
    };
}
Enter fullscreen mode Exit fullscreen mode

Visualizing temperature variation in a year using Blazor Range Step Area Chart

Visualizing temperature variation in a year using Blazor Range Step Area Chart

Key features

Markers

The Blazor Range Step Area Chart allows you to mark the data points with various built-in shapes, including circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, and pentagons. Moreover, you can use images to make the data points more visually appealing.

Refer to the following code example to enable the marker for a data series.

<SfChart>
 <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
 <ChartSeriesCollection>
  <ChartSeries DataSource="@WeatherReports" XName="X" High="High" Low="Low" Opacity="0.5" Type="ChartSeriesType.RangeStepArea">
   <ChartMarker Visible=true Height="10" Width="10">
   </ChartMarker>
  </ChartSeries>
 </ChartSeriesCollection>
</SfChart>

@code {
    public class ChartData
    {
        public string X { get; set; }
        public double Low { get; set; }
        public double High { get; set; }
    }

    public List<ChartData> WeatherReports = new List<ChartData>
    {
        new ChartData { X= "Jan", High= 29, Low= 22 },
        new ChartData { X= "Feb", High= 32, Low= 22 },
        new ChartData { X= "Mar", High= 35, Low= 25 },
        new ChartData { X= "Apr", High= 37, Low= 27 },
        new ChartData { X= "May", High= 35, Low= 25 },
        new ChartData { X= "Jun", High= 32, Low= 22 },
        new ChartData { X= "Jul", High= 30, Low= 20 },
        new ChartData { X= "Aug", High= 32, Low= 22 },
        new ChartData { X= "Sep", High= 35, Low= 25 },
        new ChartData { X= "Oct", High= 37, Low= 27 },
        new ChartData { X= "Nov", High= 35, Low= 25 },
        new ChartData { X= "Dec", High= 32, Low= 22 }
    };
}
Enter fullscreen mode Exit fullscreen mode

Adding markers to Blazor range step area chart

Adding markers to Blazor range step area chart

Data labels

Data labels enable you to display information about the data points within the chart. You can leverage HTML elements such as images, divs, and spans by adding templates to enhance the appearance of data labels. Additionally, data labels can be rotated to any desired angle.

Refer to the following code example to enable data labels in the chart.

<SfChart>
 <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
 <ChartSeriesCollection>
  <ChartSeries DataSource="@WeatherReports" XName="X" High="High" Low="Low" Opacity="0.5" Type="ChartSeriesType.RangeStepArea">
   <ChartMarker Visible=true Height="10" Width="10">
    <ChartDataLabel Visible="true"></ChartDataLabel>
   </ChartMarker>             
  </ChartSeries>
 </ChartSeriesCollection>
</SfChart>
Enter fullscreen mode Exit fullscreen mode

Adding data labels to Blazor range step area chart

Adding data labels to Blazor range step area chart

Empty points

When no data is available for specific dates or categories, you can elegantly handle them within the chart using empty data points.

<SfChart>
 <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
 <ChartSeriesCollection>
  <ChartSeries DataSource="@WeatherReports" XName="X" High="High" Low="Low" Opacity="0.5" Type="ChartSeriesType.RangeStepArea">
   <ChartMarker Visible=true Height="10" Width="10">
    <ChartDataLabel Visible="true"></ChartDataLabel>
   </ChartMarker>
   <ChartSeriesBorder Width="2"></ChartSeriesBorder>
  </ChartSeries>
 </ChartSeriesCollection>
</SfChart>

@code {
    public class ChartData
    {
        public string X { get; set; }
        public Nullable<double> Low { get; set; }
        public Nullable<double> High { get; set; }
    }

    public List<ChartData> WeatherReports = new List<ChartData>
    {
        new ChartData { X= "Jan", High= 29, Low= 22 },
        new ChartData { X= "Feb", High= 32, Low= 22 },
        new ChartData { X= "Mar", High= 35, Low= 25 },
        new ChartData { X= "Apr", High= 37, Low= 27 },
        new ChartData { X= "May", High= null, Low= null },
        new ChartData { X= "Jun", High= 32, Low= 22 },
        new ChartData { X= "Jul", High= 30, Low= 20 },
        new ChartData { X= "Aug", High= 32, Low= 22 },
        new ChartData { X= "Sep", High= 35, Low= 25 },
        new ChartData { X= "Oct", High= 37, Low= 27 },
        new ChartData { X= "Nov", High= 35, Low= 25 },
        new ChartData { X= "Dec", High= 32, Low= 22 }
    };
}
Enter fullscreen mode Exit fullscreen mode

Empty data points in Blazor range step area chart

Empty data points in Blazor range step area chart

Customization

The Blazor Range Step Area Chart provides built-in APIs for easy customization. You can tailor the appearance of the chart using the following properties:

  • Fill—To change the color of the data series.
  • Opacity—To control the transparency of the fill color.
  • DashArray—To alter the pattern of dashes in the data series.
  • ChartSeriesBorder—To modify the color and width of the chart series border.

Refer to the following code example.

<ChartSeriesCollection>
 <ChartSeries DataSource="@WeatherReports" XName="X" High="High" Low="Low" DashArray="2,3" Fill="red" Opacity="0.5" Type="ChartSeriesType.RangeStepArea">
  <ChartMarker Visible=true Height="10" Width="10">                 
  </ChartMarker>
  <ChartSeriesBorder Width="2"></ChartSeriesBorder>
 </ChartSeries>
</ChartSeriesCollection>
Enter fullscreen mode Exit fullscreen mode

Customizing the Blazor Range Step Area Chart

Customizing the Blazor Range Step Area Chart

Other supported features

The Blazor Range Step Area Chart supports various other data visualization capabilities, including animation, multiple series, tooltips, legends, zooming, and panning.

Data visualization features of Blazor Range Step Area Chart

Data visualization features of Blazor Range Step Area Chart

Note: For more details, refer to the Range Step Area Chart documentation and live demos.

What’s new in existing charts?

Let’s see the new features added in the existing Blazor Chart types for the 2023 Volume 2 release!

Cross marker

In this release, a new cross marker shape has been introduced. This shape is beneficial for highlighting data points and emphasizing essential values in charts.

To use it, first, we should enable markers for data points in our Blazor Charts. This can be done by setting the Visible property of the ChartMarker to true.

To render cross markers, we need to set the Shape property of the ChartMarker to ChartShape.Cross. This will transform the default marker shape into a cross shape.

Refer to the following code example.

@using Syncfusion.Blazor.Charts

<SfChart>
 <ChartSeriesCollection>
  <ChartSeries DataSource="@ConsumerReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
   <ChartMarker Visible="true" Height="20" Width="20" Shape="ChartShape.Cross" />
   </ChartSeries>
  </ChartSeriesCollection>
</SfChart>

@code {
    public class ChartData
    {
        public string X { get; set; }
        public double Y { get; set; }
    }

    public List<ChartData> ConsumerReports = new List<ChartData>
    {
        new ChartData{ X= "Monday", Y= 28 },
        new ChartData{ X= "Tuesday", Y= 20 },
        new ChartData{ X= "Wednesday", Y= 30 },
        new ChartData{ X= "Thursday", Y= 22 },
        new ChartData{ X= "Friday", Y= 32 },
        new ChartData{ X= "Saturday", Y= 35 },        
    };
}
Enter fullscreen mode Exit fullscreen mode

Cross markers in a Blazor line chart

Cross markers in a Blazor line chart

Auto marker shape

By default, when data markers are enabled in Blazor Charts, all series will be rendered with the same marker shape: a circle.

However, in this latest release, we introduced a new AutoMarker shape option. Now, the ChartMarker class’s Shape property is set to ChartShape.Auto by default when the marker is enabled. So, each series will automatically be rendered with a unique marker shape.

Refer to the following code example.

@using Syncfusion.Blazor.Charts

<SfChart ID="container">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory" Format="yyyy"></ChartPrimaryXAxis>
    <ChartPrimaryYAxis Interval="40"></ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries Name="Series1" DataSource="@ConsumerReports" XName="X" YName="Y1" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" IsFilled="true" />
        </ChartSeries>
        <ChartSeries Name="Series2" DataSource="@ConsumerReports" XName="X" YName="Y2" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" IsFilled="true" />
        </ChartSeries>
        <ChartSeries Name="Series3" DataSource="@ConsumerReports" XName="X" YName="Y3" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" IsFilled="true" />
        </ChartSeries>
        <ChartSeries Name="Series4" DataSource="@ConsumerReports" XName="X" YName="Y4" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" IsFilled="true" />
        </ChartSeries>
        <ChartSeries Name="Series5" DataSource="@ConsumerReports" XName="X" YName="Y5" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" IsFilled="true" />
        </ChartSeries>
        <ChartSeries Name="Series6" DataSource="@ConsumerReports" XName="X" YName="Y6" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" IsFilled="true" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public class ChartData
    {
        public DateTime X { get; set; }
        public double Y { get; set; }
        public double Y1 { get; set; }
        public double Y2 { get; set; }
        public double Y3 { get; set; }
        public double Y4 { get; set; }
        public double Y5 { get; set; }
        public double Y6 { get; set; }
    }

    public List<ChartData> ConsumerReports = new List<ChartData>
    {
        new ChartData{ X= new DateTime(2005,01,01), Y1 = 100, Y2 = 190, Y3 = 30, Y4 = 125, Y5 = 160, Y6 = 60 },
        new ChartData{ X= new DateTime(2006,01,01), Y1 = 120, Y2 = 140, Y3 = 80, Y4 = 190, Y5 = 170, Y6 = 30 },
        new ChartData{ X= new DateTime(2007,01,01), Y1 = 110, Y2 = 80, Y3 = 60, Y4 = 140, Y5 = 200, Y6 = 30 },
        new ChartData{ X= new DateTime(2008,01,01), Y1 = 30, Y2 = 120, Y3 = 60, Y4 = 180, Y5 = 150, Y6 = 90 },
        new ChartData{ X= new DateTime(2009,01,01), Y1 = 170, Y2 = 50, Y3 = 20, Y4 = 110, Y5 = 140, Y6 = 80 },
}
Enter fullscreen mode Exit fullscreen mode

Auto marker shape feature in Blazor Charts

Auto marker shape feature in Blazor Charts

Zooming toolbar

The zooming toolbar in the Blazor Charts component provides users with intuitive controls to zoom in, zoom out, pan, and reset the chart. It enables users to interact with the chart and examine data more closely.

To enable this feature, set the ToolbarDisplayMode property to ToolbarMode.Always.

Refer to the following code example to display the zooming toolbar on initial loading of the chart.

@using Syncfusion.Blazor.Charts

<SfChart>
 <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
 <ChartPrimaryYAxis Interval="10"></ChartPrimaryYAxis>
  <ChartZoomSettings EnableSelectionZooming="true" EnableMouseWheelZooming="true" EnablePinchZooming="true" ToolbarDisplayMode="ToolbarMode.Always">
  </ChartZoomSettings>
  <ChartSeriesCollection>
   <ChartSeries DataSource="@SalesReports" XName="X" YName="YValue" Type="ChartSeriesType.Column"></ChartSeries>
  </ChartSeriesCollection>
</SfChart>

@code {

    public class ChartData1
    {
        public string X { get; set; }
        public double YValue { get; set; }
    }

    public List<ChartData1> SalesReports = new List<ChartData1>
    {
        new ChartData1 { X= "USA", YValue= 50 },
        new ChartData1 { X= "GBR", YValue= 20 },
        new ChartData1 { X= "CHN", YValue= 26 },
        new ChartData1 { X= "UK", YValue= 20 },
        new ChartData1 { X= "AUS", YValue= 35 },
        new ChartData1 { X= "IND", YValue= 15 },
        new ChartData1 { X= "DEN", YValue= 40 },
        new ChartData1 { X= "MEX", YValue= 30 },
    };
}
Enter fullscreen mode Exit fullscreen mode

Zooming toolbar in Blazor Charts

Zooming toolbar in Blazor Charts

Conclusion

Thanks for reading! In this blog, we’ve seen the new features rolled out in the Blazor Charts component for the 2023 Volume 2 release. Check out the release’s other new features in our Release Notes and What’s New pages. Try them out to visualize your data elegantly and leave your feedback in the comments below!

You can download our free trial to try our Syncfusion Blazor components if you don’t have a license.

For questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Image
Next.js on AWS: Deployment Strategies

aws, awscdk, nextjs, typescript
Image
L'IA révolutionne nos environnements de développement !
Image
This Is The Ultimate Guide To Self Propelled Wheelchair
Image
11 Methods To Refresh Your Self Propelled Wheelchair With Power Assist
Image
What Will Asbestos Exposure Lawyer Be Like In 100 Years?
Image
What Are The Myths And Facts Behind Asbestos Law Firm
Image
I Failed 300+ Times, Then This Happened…

programming, ai, computerscience, datascience
Image
CineCue - A seamless localization demo with RoR.
Image
Tải Sunwin
Image
3 Ways In Which The Coffee Maker Drip Influences Your Life
Image
CRYPTOCURRENCY SCAM / FRAUD TRACING & RECOVERY

webdev
Image
The Art of Storytelling with Your Banner Stand Design

stands, banner
Image
A Glimpse Into Best Crypto Online Casino's Secrets Of Best Crypto Online Casino
Image
JavaScript Essentials: Part 6 (Mastermind in Javascript)

javascript, beginners, api, node
Image
Level Up Your React Skills: Understanding and Using Hooks

react, javascript, webdev, programming
Image
Sustainability in Marketing: Eco-Friendly Retractable Banner Stands

retractable, stands, banner
Image
From Human to Machine

ai, machinelearning, cybersecurity
Image
Introduction to Time Complexity - Big O Notation
Image
Cat Flap Fitters Near Me
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .