Customize the Blazor Chart - Selection, Trendlines, Plot Areas, and More

In this blog, we’ll focus on expanding upon the sample Alex Trefilov made in Getting Started with Interactive Blazor Charts, by exploring some of the other great features included in our Blazor FlexChart control.

A link to download the original sample, along with all the required preprocessing steps to setup your project, is included in Alex’s blog. There are hundreds of features we could explore inside our Blazor FlexChart control, with more added in every release, but in order to prevent this blog from becoming a novel, we’ll stick to covering legends, selection mode, trendlines, and multiple plot areas, as well as their relevant features and implementations. Let’s hop right in!

Legends

In the Blazor FlexChart control, Legends can do more than simply relay the information being displayed on the chart. With the LegendToggle property set to true, you can turn a series visibility on or off by clicking on the legend in the chart. This is useful when you would like to view different combinations of various series on the chart at run-time, without manually having to edit the code and re-running the project each time you would like to change the series displayed.

The LegendPosition and LegendStyle properties give you complete control over where your legend is displayed in relation to the chart, and how the font looks inside of it. The LegendTitle property allows you to display an appropriate title above the legend as well. The HTML code below can be used directly on your Razor page to enable these properties.

LegendPosition="Position.Bottom" LegendStyle="font-size:18px" LegendToggle="true"

Selection

Selection within charts allows the end-user to choose and highlight either a specific data point or an entire series at run-time, to assist with analysis of the data. In FlexChart, the selection property is disabled by default.

To enable the setting, you’ll want to set the SelectionMode property to either Point or Series from the ChartSelectionMode enumeration within the FlexChart’s HTML portion of your Razor page, as shown below.

SelectionMode="ChartSelectionMode.Series"

By default, the selection is highlighted by a red-colored solid line. You can customize how the selection is highlighted by setting the SelectionStyle property in the HTML portion of your Razor page. This allows you to change the color of the highlighted selection, set the highlight border’s width, and choose the type of border you’d like displayed on your selection.

For this example, let’s go with a dark blue selection, a thinner border, and a dashed line as the border type. The code to accomplish this is shown below.

SelectionStyle="stroke:darkblue;stroke-width:2px;stroke-dasharray:5,5"

This is what the selection will look like now:

At this point, if you are following along from Alex’s sample, our FlexChart’s HTML portion should look like this, in full:

<FlexChart Class="chart" ChartType="ChartType.Area" ItemsSource="climateData1" BindingX="MonthShort"        
    HeaderContent="Average temperature range (°C) by month" HeaderStyle="font-size:24px"
    FooterContent="Data source: WMO World Weather Information Service (https://worldweather.wmo.int)"           
    SelectionMode="ChartSelectionMode.Series" Palette="Palette.Light"
    SelectionStyle="stroke:darkblue;stroke-width:2px;stroke-dasharray:5,5"
    LegendPosition="Position.Bottom" LegendStyle="font-size:18px" LegendToggle="true">
     <SeriesCollection>
           <Series Name="@city1" Binding="MinT,MaxT" />
           <Series Name="@city2" Binding="MinT,MaxT" ItemsSource="climateData2" />
     </SeriesCollection>
     <AxisCollection>
         <Axis Title="Temp. (C)" AxisType="AxisType.Y" Position="Position.Left" MajorGrid="false" />
     </AxisCollection>
 </FlexChart

Trendline

As the name suggests, trendlines are used to represent trends in data and are commonly used in capacities where prediction or average values are relevant to the data being displayed. The technical analysis of financial markets and scientific studies depicting change over time are two common examples where the addition of a trendline makes the data easy to readily interpret.

Luckily for us, adding trendlines to a Blazor FlexChart can be accomplished with just one line of code in your Razor page’s HTML portion, inside a SeriesCollection tag. Multiple trendlines can be added to your FlexChart, and having your data split between series makes this process even easier. The code below showcases how we will implement two trendlines in our project, one for each series.

<SeriesCollection>
        <Series Name="@city1" Binding="MinT,MaxT" />
        <Series Name="@city2" Binding="MinT,MaxT" ItemsSource="climateData2" />
        <TrendLine Name="Avg. Temp. City 1" FitType="FitType.Linear" Binding="AvgT" />
        <TrendLine Name="Avg. Temp. City 2" FitType="FitType.Linear" Binding="AvgT" ItemsSource="climateData2" />
</SeriesCollection>

Here is what our chart looks like now, with trendlines added:

The second trendline is too bright, and blue-on-blue doesn’t work well on the eyes, so let’s change the color of the second trendline to a darker, more contrasting color by utilizing the Style property, shown in the code below.

<TrendLine Name="Avg. Temp. City 2" FitType="FitType.Linear" Binding="AvgT" ItemsSource="climateData2" Style="color:brown" />

Now the second trendline looks much better:

Multiple Plot Area

Another interesting feature of our Blazor FlexChart control is the ability to implement multiple plot areas by utilizing the PlotAreaCollection built into the control’s API. Additionally, you can utilize properties to control the height, width, row index, and column index of each plot area added to the chart.

Rather than being restricted to only applying additional series over existing data points and cluttering up a chart, having the capability to apply multiple plot areas allows for increased readability of data, leading to better analysis.

If I didn’t like that both datasets are displayed over atop one another, I can still keep one chart, but through the use of multiple plot areas, I can split the datasets to make the data more clear to the end-user. How you transform the data is up to you, but in this case, I kept it simple:

To implement multiple plot areas in your FlexChart, you can utilize the code below. The PlotAreaCollection controls the multiple chart plots and referencing the PlotAreaName property within the AxisCollection links up the PlotArea with the proper axis properties.

The actual data for the X-axis and Y-axis for each chart is referenced through the “Name” property inside the AxisCollection, which is pulling information from the Series Collection AxisX and AxisY properties. Please note, that the FlexChart HTML properties are not included. To see the full code, you’ll want to download the sample and view the Climate.razor page.

SeriesCollection

<SeriesCollection>
         <Series Name="@city1" Binding="MinT,MaxT" AxisX="X" AxisY="Y" />
         <Series Name="@city2" Binding="MinT,MaxT" ItemsSource="climateData2" AxisX="X2" AxisY="Y2" />
</SeriesCollection>

AxisCollection

<AxisCollection>2.
           <Axis Title="Temp. (C)" AxisType="AxisType.Y" Position="Position.Left" MajorGrid="false" Name="Y" Min="-20" Max="40" PlotAreaName="PlotArea1" />
           <Axis Title="Month" AxisType="AxisType.X" Position="Position.Bottom" MajorGrid="false" Name="X" PlotAreaName="PlotArea1" />

           <Axis Title="Temp. (C)" AxisType="AxisType.Y" Position="Position.Left" MajorGrid="false" Name="Y2" Min="-20" Max="40" PlotAreaName="PlotArea2" />
           <Axis Title="" AxisType="AxisType.X" Position="Position.Top" MajorGrid="false" Labels="false" Name="X2" MinorGrid="false" PlotAreaName="PlotArea2" />
</AxisCollection>

PlotAreaCollection

<PlotAreaCollection>
           <PlotArea Name="PlotArea1" Row="2" />
           <PlotArea Name="PlotArea2" />
</PlotAreaCollection>