Search results

Legend

As like a chart, the legend is also available for accumulation charts, which gives information about the points. By default, the legend will be placed on the right, if the width of the chart is high or will be placed on the bottom, if the height of the chart is high. Here, the legend for a point can be collapsed by giving the empty string to the x value of the point.

default.razor
<EjsAccumulationChart Title="Mobile Browser Statistics">
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"
                                     Name="Browser">
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
  
        <AccumulationChartLegendSettings Visible="true"></AccumulationChartLegendSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Legend

Position and Alignment

By using the Position property, you can position the legend at the LeftRightTop or Bottom of the chart. You can also align the legend to CenterFar or Near to the chart using the Alignment property.

position.razor
<EjsAccumulationChart Title="Mobile Browser Statistics"> 
        <AccumulationChartSeriesCollection> 
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"
                                     Name="Browser"> 
            </AccumulationChartSeries> 
        </AccumulationChartSeriesCollection> 
  
        <AccumulationChartLegendSettings Visible="true" Position="LegendPosition.Top"></AccumulationChartLegendSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Position and Alignment

Legend Shape

To change the legend icon, use the LegendShape property in the Series. By default, legend icon is SeriesType.

legend-shape.razor
<EjsAccumulationChart Title="Mobile Browser Statistics">
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries LegendShape="LegendShape.Rectangle" DataSource="@StatisticsDetails" XName="Browser" YName="Users"
                                     Name="Browser">

            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
  
        <AccumulationChartLegendSettings Visible="true"></AccumulationChartLegendSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Legend Shape

Legend Size

The legend size can be changed by using the Width and Height properties of the LegendSettings.

size.razor
<EjsAccumulationChart Title="Mobile Browser Statistics">
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"
                                     Name="Browser">
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
  
        <AccumulationChartLegendSettings Visible="true" Height="28%" Width="44%">
            <AccumulationChartLegendBorder Color="Pink" Width="1"></AccumulationChartLegendBorder>
        </AccumulationChartLegendSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Legend Size

Legend Item Size

You can customize the size of the legend items by using the ShapeHeight and ShapeWidth properties.

item-size.razor
<EjsAccumulationChart Title="Mobile Browser Statistics"> 
        <AccumulationChartSeriesCollection> 
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users" 
                                     Name="Browser">
            </AccumulationChartSeries> 
        </AccumulationChartSeriesCollection> 
  
        <AccumulationChartLegendSettings Visible="true" ShapeHeight="15" ShapeWidth="15"> 
        </AccumulationChartLegendSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Legend Item Size

Paging for Legend

Paging will be enabled by default, when the legend items exceeds the legend bounds. You can view the each legend item by navigating through the pages.

paging.razor
<EjsAccumulationChart Title="Mobile Browser Statistics">
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"
                                     Name="Browser">
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
  
        <AccumulationChartLegendSettings Visible="true" Height="150" Width="80">
        </AccumulationChartLegendSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Paging for Legend