How to float the legend on the chart?

This article explains how to float the legend on the chart in React Chart.

Customize to float the legend on the chart

In data visualization, legends play a crucial role in providing context and making the chart easier to understand.

You can change the position of the legend by using the position property. By default, the legend position is set to auto, which is determined by the area type of the chart.

However, they are not restricted to this position and can be placed anywhere on or around the plot area. This flexibility allows for better utilization of space and enhances the overall readability of the chart. This article will guide you on how to customize the position of legends in a chart.

The position of the legends can be adjusted according to the requirements of the data and the chart. They can be placed at the top, bottom, left, right, or even inside the plot area.

In the following code example, the legend can float anywhere by using a custom position.

Index.js

import { createRoot } from 'react-dom/client';
import * as React from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, SplineAreaSeries,
 Highlight } from '@syncfusion/ej2-react-charts';

const SplineArea = () => {
 return (
       <ChartComponent
         id="charts"
         primaryXAxis={{
           valueType: 'DateTime',
           minimum: new Date(2002, 0, 1),
           maximum: new Date(2011, 0, 1)
         }}
         primaryYAxis={{
           labelFormat: '{value}%',
           maximum: 4,
           interval: 1
         }}
         legendSettings={{
           visible: true,
           position: 'Custom',
           location: { x: 120, y: 50 }
         }}
         title="Inflation Rate in Percentage"
       >
         <Inject services={[SplineAreaSeries, DateTime, Legend, Highlight]} />
         <SeriesCollectionDirective>
           <SeriesDirective
             dataSource={data1}
             xName="x"
             yName="y"
             name="US"
             type="SplineArea"
           ></SeriesDirective>
           <SeriesDirective
             dataSource={data2}
             xName="x"
             yName="y"
             name="France"
             type="SplineArea"
           ></SeriesDirective>
         </SeriesCollectionDirective>
       </ChartComponent>
    );
};
export default SplineArea;

const root = createRoot(document.getElementById('sample'));
root.render(<SplineArea />);

The following screenshot portrays the results of the code snippet mentioned above.

Screenshot:

View Sample in Stackblitz

Conclusion

I hope you enjoyed learning how to float the legend on the chart in React Chart Component.

You can refer to our React 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 React 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, support portal, or feedback portal. We are always happy to assist you!