How to customize legend item shape in the JavaScript Chart?
You can customize the legend item symbol shape by using the shape property of legend. Essential Chart supports about 20 different types of shape for legend item symbol, marker, trackball marker and data label background shape.
The following table describes the different shapes available for legend item symbol.
Shape Name | Type | Default | Description |
None | string | none | Sets the shape to none. |
LeftArrow | string | leftarrow | Sets the shape to leftarrow. |
RightArrow | string | rightarrow | Sets the shape to rightarrow. |
Circle | string | circle | Sets the shape to circle. |
Cross | string | cross | Sets the shape to cross. |
HorizLine | string | horizline | Sets the shape to horizline. |
VertLine | string | vertLine | Sets the shape to vertline. |
Rectangle | string | rectangle | Sets the shape to rectangle. |
Diamond | string | diamond | Sets the shape to diamond. |
Triangle | string | triangle | Sets the shape to triangle. |
InvertedTriangle | string | invertedtriangle | Sets the shape to invertedtriangle. |
Hexagon | string | hexagon | Sets the shape to hexagon. |
Pentagon | string | pentagon | Sets the shape to pentagon. |
Star | string | star | Sets the shape to star. |
Ellipse | string | ellipse | Sets the shape to ellipse. |
Wedge | string | wedge | Sets the shape to wedge. |
Trapezoid | string | trapezoid | Sets the shape to trapezoid. |
UpArrow | string | uparrow | Sets the shape to uparrow. |
DownArrow | string | downarrow | Sets the shape to downarrow. |
Image | string | image | Sets the shape to image. |
JS
$("#container").ejChart({
legend: {
shape: 'hexagon'
}
});
The following screenshot displays the Chart with hexagon shape legend item symbol.
Figure 1: Chart with hexagon shape legend item symbol
JS Playground sample link: Legend Shape
Conclusion
I hope you enjoyed learning about how to round the decimal values in Chart axis.
You can refer to our JavaScript Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Chart example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
