Search code examples
syncfusion

Sync-Fusion React chart Title inside Graph

I am using react syncfusion chart , so i have requirement to show a logo inside graph , i am trying with Annotation directive also but not able to show in the graph. If any one have idea about it

Solution

  • We have analysed your query. We suggest you to render the title inside a graph as annotation. We have prepared sample for your reference. Please check with the below sample and code snippet.

    import { ChartAnnotation, AnnotationsDirective, AnnotationDirective } from '@syncfusion/ej2-react-charts';
<ChartComponent >
 <Inject services={[ChartAnnotation]}/>
 <AnnotationsDirective>
    <AnnotationDirective content='<div id="chart_title_annotation" style="font-size:15px; font-style=Segoe UI"> Inflation - Consumer Price</div>' region='Chart' coordinateUnits='Pixel' x='50%' y='10%'>
    </AnnotationDirective>
</AnnotationsDirective>
</ChartComponent>

    enter image description here

    https://stackblitz.com/edit/react-2wnudf?file=index.js

    Regards, Durga G