JavaScript/jQuery PieChart - legend
The PieChart UI component can include a legend. It helps you distinguish and identify the points of the displayed series. Each point is presented by an item on the legend. An item marker identifies the point's (slice's) color. An item label displays a value corresponding to the point. Use the legend property to set up PieChart legend properties to the required values. To learn more about the legend and its properties, refer to the Legend topic.
backgroundColor
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
columnCount
Use this property when the legend is oriented vertically. Otherwise, use rowCount.
See Also
- legend.columnItemSpacing
customizeItems
The following code shows how to use the customizeItems function to sort legend items alphabetically:
jQuery
$(function() {
$("#pieChartContainer").dxPieChart({
// ...
legend: {
customizeItems: function(items) {
return items.sort(function(a, b) {
var itemA = a.text.toLowerCase();
var itemB = b.text.toLowerCase();
if(itemA < itemB) return -1;
if(itemA > itemB) return 1;
return 0;
});
}
}
});
});Angular
<dx-pie-chart ... >
<dxo-legend ...
[customizeItems]="sortLegendItems">
</dxo-legend>
</dx-pie-chart>
// ...
export class AppComponent {
sortLegendItems(items) {
return items.sort((a, b) => {
let itemA = a.text.toLowerCase();
let itemB = b.text.toLowerCase();
if(itemA < itemB) return -1;
if(itemA > itemB) return 1;
return 0;
});
}
}
import { DxPieChartModule } from 'devextreme-angular';
// ...
@NgModule({
imports: [
// ...
DxPieChartModule
],
// ...
})
export class AppModule { }Vue
<template>
<DxPieChart ... >
<DxLegend
:customize-items="sortLegendItems"
/>
</DxPieChart>
</template>
<script>
import { DxPieChart, DxLegend } from 'devextreme-vue/pie-chart';
export default {
components: {
DxPieChart,
DxLegend
},
methods: {
sortLegendItems(items) {
return items.sort((a, b) => {
let itemA = a.text.toLowerCase();
let itemB = b.text.toLowerCase();
if(itemA < itemB) return -1;
if(itemA > itemB) return 1;
return 0;
});
}
}
}
</script>React
import React from 'react';
import { PieChart, Legend } from 'devextreme-react/pie-chart';
class App extends React.Component {
render() {
return (
<PieChart ... >
<Legend ...
customizeItems={this.sortLegendItems}
/>
</PieChart>
);
}
sortLegendItems(items) {
return items.sort((a, b) => {
let itemA = a.text.toLowerCase();
let itemB = b.text.toLowerCase();
if(itemA < itemB) return -1;
if(itemA > itemB) return 1;
return 0;
});
}
}
export default App;ASP.NET MVC Controls
@(Html.DevExtreme().PieChart()
@* ... *@
.Legend(l => l
.CustomizeItems("sortLegendItems")
)
)
<script type="text/javascript">
function sortLegendItems (items) {
return items.sort(function(a, b) {
var itemA = a.text.toLowerCase();
var itemB = b.text.toLowerCase();
if(itemA < itemB) return -1;
if(itemA > itemB) return 1;
return 0;
});
}
</script>horizontalAlignment
Along with verticalAlignment, specifies the legend's position.
hoverMode
In the PieChart UI component, legend items represent series points. When a legend item is hovered over, the corresponding series point is highlighted. To prevent this behavior, set the hoverMode property to 'none'.
You can set a custom 'hover' style for series points. To do this, use the series.hoverStyle configuration object.
itemsAlignment
Aligns items in the last column or row (depending on the legend's orientation). Applies when legend items are not divided into columns or rows equally.
markerTemplate
orientation
Arranges legend items vertically (in a column) or horizontally (in a row). The default value is "horizontal" if the legend.horizontalAlignment is "center". Otherwise, it is "vertical".
rowCount
Use this property when the legend is oriented horizontally. Otherwise, use columnCount.
See Also
- legend.rowItemSpacing
title
To specify only the title's text, assign it directly to this property. Otherwise, set this property to an object with the text and other fields specified.
The title can be accompanied by a subtitle. Assign it to the title.subtitle property.
verticalAlignment
Along with horizontalAlignment, specifies the legend's position.