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