How to add title and subtitle to the React Chart only on export?

Description

This article shows how to add title and subtitle to the React Chart only on export.

Solution

We have created two versions of the chart: one with a title and subtitle for exporting purposes, and the other without them for UI display. By using the loaded event, we can set the display property of the exported chart container to ‘none’, effectively hiding the chart with the title and subtitle. This ensures that the exported chart includes the title and subtitle without being shown in the layout.

Code Snippet

  <ChartComponent id="charts"
                   ref={chartInstance}
  </ChartComponent>
   <ChartComponent id="charts2"
                   ref={chartInstance2}
                   subTitle="Top 10 Countries Using Solar Power"
                   title='Countries Using Solar Power'
                   loaded={onChartLoad.bind(this)}>
   </ChartComponent>
   
   const onChartLoad = (args) => {
       let chart2 = document.getElementById('charts2');
       chart2.style.display = 'none';
   };

   const onClick = (e) => {
       chartInstance2.current.export('PNG', 'result');
   };

The following image illustrates the output of the above code.

Chart at initial stage

Exported Image

View Sample in Stackblitz

Conclusion

I hope you enjoyed learning how to add title and subtitle to the React Chart only on export.

You can refer to our React Charts feature tour page to learn about its other features and documentation, and how to quickly get started for configuration specifications. You can also explore our React Charts example to understand how to create and visualize 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 comment section below. You can also contact us through our support forums, Direct Trac, or feedback portal. We are always happy to assist you!