Legend in React Chart
A legend in a chart serves as a visual key that identifies the symbols, colors, or patterns used to represent different data series, enabling users to interpret the chart accurately.
Overview
By default, the visible property of the ChartLegend component is set to true, ensuring the legend is displayed. To populate the legend with entries, make sure to define the name property within each ChartSeries component.
Shapes
You can set the legendShape property in the ChartSeries component to customize the shape of legend items. Available shapes include: SeriesType, Circle, Rectangle, Cross, Diamond, HorizontalLine, VerticalLine, Triangle, Pentagon, and InvertedTriangle, as well as Image.
Legend position
To control where the legend appears on the chart, use the position property in the ChartLegend component.
Available Options:
-
Top- Displays the legend at the top of the chart. -
Bottom- Displays the legend at the bottom. -
Right- Displays the legend on the right side. -
Left- Displays the legend on the left side. -
Custom– Allows precise placement usingxandycoordinates -
Auto– Automatically determines the best position based on the chart layout.
Legend custom position
Set the position property to custom and use the location property to specify the x and y coordinates for the legend's placement.
Alignment
The align property in the ChartLegend component allows you to control how the legend is aligned within its assigned position.
Available Options:
-
Left– Aligns the legend to the start of the container. -
Center– Centers the legend within the container. -
Right– Aligns the legend to the end of the container.
Reverse
The inversed property in the ChartLegend component allows you to reverse the order of legend items. When set to true, the items are displayed from left to right. By default, it is set to false, which arranges the items from right to left.
Title
You can use the title property in the ChartLegend component to display a descriptive title above the legend, providing additional context for the data series.
Title customization
Use the titleStyle property in the ChartLegend component to customize the appearance of the legend title, and maxTitleWidth to control its maximum width.
Legend toggle
The toggleVisibility property enhances the interactivity of the chart legend by allowing users to control the visibility of individual data series. By default, toggleVisibility is set to true. This means users can click on legend items to show or hide the corresponding data series in the chart.
Size and appearance
You can customize the overall look and dimensions of the legend in the ChartLegend component using the following properties:
Key Properties:
-
height: Sets the height of the legend area. -
width: Sets the width of the legend area. -
border: Defines the border style, color, and width around the legend. -
background: Specifies the background color of the legend area.
Legend item size
You can customize the size and spacing of legend symbols in the ChartLegend component using the following properties:
Key Properties:
-
shapeHeight: Sets the height of each legend shape. -
shapeWidth: Sets the width of each legend shape. -
shapePadding: Defines the spacing between the legend shape and its corresponding label.
Pagination
When a chart contains many legend items, you can enable legend paging to navigate through them efficiently. To do this, set both the width and height properties in the ChartLegend component. This limits the visible area of the legend and automatically activates paging controls when the content exceeds the defined space.
Text customization
You can customize how legend text appears in the ChartLegend component using the textStyle, and maxLabelWidth properties.
maxLabelWidth: Defines the maximum width of legend labels.textStyle: Enables detailed customization of the legend text appearance, such as font size, color, and weight.