Search results

Pareto chart

Pareto charts are used to find the cumulative values of data in different categories. It is a combination of Column and Line series. The initial values are represented by column chart and the cumulative values are represented by Line chart. To render a pareto chart, use series Type as Pareto.

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

<EjsChart Title="Defect vs Frequency">
  
        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category" Interval="1" Title="Defects">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
            <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
        </ChartPrimaryXAxis>
  
        <ChartPrimaryYAxis Title="Frequency" Minimum="0" Maximum="150" Interval="30">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMajorGridLines Width="1"></ChartAxisMajorGridLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
            <ChartAxisMinorGridLines Width="1"></ChartAxisMinorGridLines>
        </ChartPrimaryYAxis>
        
        <ChartSeriesCollection>
          
            <ChartSeries DataSource="@Data" XName="X" YName="Y" Name="Defect" Width="2" Type="ChartSeriesType.Pareto">
                <ChartMarker Visible="true" Height="10" Width="10">
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
  
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
</EjsChart>
   
@code{
  public class ChartData
        {
            public string X;
            public double Y;
        }
   public List<ChartData> Data = new List<ChartData>
       {
            new ChartData { X= "Traffic", Y= 56 }, 
            new ChartData { X= "Child Care", Y= 44.8 },
            new ChartData { X= "Transport", Y= 27.2 }, 
            new ChartData { X= "Weather", Y= 19.6 },
            new ChartData { X= "Emergency", Y= 6.6 }
         };
   }

Pareto chart

See Also