How to Add Custom Legend Using SVG in React Chart?

2 mins read

This article explains how to replace the default legend in a chart with a custom image or SVG graphic using annotations in a React Chart.

Instead of using the built-in legend, you can use AnnotationDirective to embed an SVG image directly into the chart area. This gives you full control over the appearance and placement of your custom legend.

We embed a simple SVG face illustration using AnnotationDirective. The annotation is placed relative to the chart’s data series using pixel-based coordinates, allowing precise placement.

Annotation Configuration

AnnotationsDirective: A wrapper that allows multiple annotations to be added to the chart.
AnnotationDirective:
1. content: Contains the HTML/SVG markup. In this example, it’s a simple SVG face illustration.
2. region="Series": Ensures the annotation is placed relative to the chart’s data series.
3. coordinateUnits=“Pixel”: Allows you to position the annotation precisely using pixel values.
4. x and y: Control the exact location of the annotation on the chart canvas.

Code Example

<ChartComponent
         id="charts"
         chartMouseClick={chartMouseClick.bind(this)}
       >
         <AnnotationsDirective>
           <AnnotationDirective
             content='<div id="series4" style="font-size:18px;font-weight:bold;"><span></span>
 
       <svg xmlns="http://www.w3.org/2000/svg" style="
       pointer-events: none" width="30" height="30" viewBox="0 0 100 100">
       <!-- Face background -->
       <circle cx="50" id = "series4Face background" cy="50" r="45" stroke-width="3" fill="transparent"stroke="red" />
       <!-- Eyes -->
       <circle cx="35" id = "series4Eyes" cy="40" r="5" fill="red" stroke-width="3" />
       <circle cx="65" id = "series4Eyes1" cy="40" r="5" fill="red" stroke-width="3" />
       <!-- Mouth -->
       <path d="M30 60 Q 50 70, 70 60" stroke="red" stroke-width="3" id = "series4Mouth" fill="none" />
     </svg>
   
         </div>'
             region="Series"
             coordinateUnits="Pixel"
             x={10}
             y={-40}
           ></AnnotationDirective>…
       </ChartComponent>

Output

Sample

StackBlitz Sample*

Conclusion

I hope you enjoyed learning about how to add custom legend using SVG in React Chart.

You can refer to our React Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our React Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our React components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our React Chart and other React components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)