How to Render Multicolored Line Using Segments in Blazor Charts?

This article explains how to render a multicolored line using segments in Blazor Charts.

Blazor Charts provides an option to render a multicolored line chart using segments.

This can be achieved by setting the ChartSeriesType to MultiColoredLine and the SegmentAxis to Segment.Y. You then define the required number of ChartSegment elements within the ChartSegments collection. Each ChartSegment specifies a Value and a Color, which determines how the line is colored based on the Y-axis values.

The following code example demonstrates how to render a multicolored line chart using segments.

@using Syncfusion.Blazor.Charts

<SfChart>    
   <ChartPrimaryYAxis Minimum="10" Maximum="50" Interval="5"></ChartPrimaryYAxis>
   <ChartSeriesCollection>
       <ChartSeries DataSource="@RangeChartData"
                    Type="Syncfusion.Blazor.Charts.ChartSeriesType.MultiColoredLine"
                    XName="Timestamp"
                    YName="AverageValue"
                    SegmentAxis="Segment.Y">
           <ChartSegments>
               <ChartSegment Value="15"  Color="aqua" />
               <ChartSegment Value="20" Color="red" />
               <ChartSegment Value="25" Color="yellow" />
               <ChartSegment Value="35" Color="green" />
               <ChartSegment Value="40" Color="yellow" />
               <ChartSegment Value="45" Color="red" />
               <ChartSegment  Color="aqua" />
           </ChartSegments>
           <ChartMarker IsFilled="false" Visible="true" Width="8" Height="8" />
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart>

@code{
   public class ChartData
   {
       public DateTime Timestamp { get; set; }
       public double AverageValue { get; set; }
       public string PointColor { get; set; }
   }
   public List<ChartData> RangeChartData = new List<ChartData>();
   protected override void OnInitialized()
   {
       RangeChartData.Add(new ChartData { Timestamp = DateTime.Parse("2023-09-20 22:11"), AverageValue = 8.0, PointColor ="yellow" });
       RangeChartData.Add(new ChartData { Timestamp = DateTime.Parse("2023-09-20 22:12"), AverageValue = 25.0, PointColor ="green" });
       //...
   }

} 

Output

Live Sample for ChartSegment

Conclusion:

We hope you found this guide helpful in learning How to render multicolored line using segments in Blazor Charts. For more features, visit our [Blazor Charts feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our [Blazor Charts example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!