Legend in ASP.NET CORE Accumulation Chart Component
19 Dec 202420 minutes to read
Like 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. Other customization features regarding the legend element are same as the chart legend
. Here, the legend for a point can be collapsed by giving the empty string to the x value of the point.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="true">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
}
Position and Alignment
By using the position property, you can position the legend at the left
, right
, top
or bottom
of the chart. You can also align the legend to center
, far
or near
of the chart using the alignment property.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="true" position="Top">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
}
Legend Reverse
You can reverse the order of the legend items by using the reverse
property. By default, legend for the first series in the collection will be placed first.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="true" reverse="true">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
}
Legend Shape
To change the legend icon shape, use the legendShape
property in the series
. By default, legend icon shape is seriesType
.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="true">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser"
legendShape="Rectangle">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
}
Legend Size
The legend size can be changed by using the width
and height
properties of the legendSettings
.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="true" height="28%" width="44%">
<e-legendsettings-border color="pink" width="1"></e-legendsettings-border>
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
}
Legend Item Size
You can customize the size of the legend items by using the shapeHeight
and shapeWidth
properties.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="true" shapeHeight="15" shapeWidth="15">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
}
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 between the pages using the navigation buttons.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="true" height="150" width="80">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
}
Legend Text Wrap
When the legend text exceeds the container, the text can be wrapped by using textWrap Property. End user can also wrap the legend text based on the maximumLabelWidth property.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="true" textWrap="Wrap" maximumLabelWidth="50">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
}
Enable Animation
You can customize the animation while clicking legend by setting enableAnimation as true or false using enableAnimation
property in Accumulation Chart.
@{
List<GroupingChartData> chartData = new List<GroupingChartData>
{
new GroupingChartData { xValue = "China", yValue = 26, text = "China: 26" },
new GroupingChartData { xValue = "Russia", yValue = 19, text = "Russia: 19" },
new GroupingChartData { xValue = "Germany", yValue = 17, text = "Germany: 17" },
new GroupingChartData { xValue = "Japan", yValue = 12, text = "Japan: 12" },
new GroupingChartData { xValue = "France", yValue = 10, text = "France: 10" },
new GroupingChartData { xValue = "South Korea", yValue = 9, text = "South Korea: 9" },
new GroupingChartData { xValue = "Great Britain", yValue = 27, text = "Great Britain: 27" },
new GroupingChartData { xValue = "Italy", yValue = 8, text = "Italy: 8" },
new GroupingChartData { xValue = "Australia", yValue = 8, text = "Australia: 8" },
new GroupingChartData { xValue = "Netherlands", yValue = 8, text = "Netherlands: 8" },
new GroupingChartData { xValue = "Hungary", yValue = 8, text = "Hungary: 8" },
new GroupingChartData { xValue = "Brazil", yValue = 7, text = "Brazil: 7" },
new GroupingChartData { xValue = "Spain", yValue = 7, text = "Spain: 7" },
new GroupingChartData { xValue = "Kenya", yValue = 6, text = "Kenya: 6" }
};
}
<ejs-accumulationchart id="container" title="RIO Olympics Gold" enableAnimation="true" enableSmartLabels="true">
<e-accumulationchart-tooltipsettings enable="true"></e-accumulationchart-tooltipsettings>
<e-accumulationchart-legendsettings visible="true"></e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series explode="true" dataSource="chartData" xName="xValue" yName="yValue" name="RIO">
<e-accumulationseries-datalabel visible="true" position="Outside">
<e-connectorstyle type="Line" length="5%"></e-connectorstyle>
<e-font size="14px"></e-font>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class GroupingChartData
{
public string xValue;
public double yValue;
public string text;
}
Legend Title
You can set title for legend using Title
property in LegendSettings
. You can also customize the FontStyle
, Size
, FontWeight
, Color
, TextAlignment
, FontFamily
, Opacity
and TextOverflow
of legend title. TitlePosition
is used to set the legend position in Top
, Left
and Right
position. MaximumTitleWidth
is used to set the width of the legend title. By default, it will be 100px
.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="true" position="Bottom" title="Browsers">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
}
Arrow Page Navigation
By default, the page number will be enabled while legend paging. Now, you can disable that page number and also you can get left and right arrows for page navigation. You have to set false
value to EnablePages
to get this support.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings width='260px' height='50px' enablePages="false" position='Bottom'>
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
}
Legend Item Padding
The itemPadding
property can be used to adjust the space between the legend items.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings width='260px' height='50px' itemPadding=30 position='Bottom'>
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
}
Legend layout
The Layout
property in LegendSettings
allows you to display the legend either horizontally or vertically. By default, the Layout
is set to Auto. The MaximumColumns
property in LegendSettings
defines the maximum number of columns that can be displayed within the available space when using the auto layout. Additionally, enabling the FixedWidth
property in LegendSettings
ensures that all legend items are displayed with equal widths. The width of each item is determined by the maximum width among the legend items.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="true" layout="Auto" maximumColumns="2" fixedWidth="true">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
public string xValue;
public double yValue;
}