Visualize the Top 10 Countries Driving Renewable Energy Investments with Stunning React 3D Charts
syncfusion
TL;DR: Learn to visualize the top 10 countries in renewable energy investment using Syncfusion’s React 3D Column Chart. Format your data into an array and bind it with Chart3DSeriesDirective. Customize axes, titles, labels, and tooltips for a clear, interactive data story. Ideal for presenting complex global energy trends with visual impact.
Welcome back to our latest installment of the Weekly Data Visualization blog series!
In the dynamic field of data visualization, creating compelling and informative visuals is crucial. In this blog, we are excited to showcase Syncfusion’s dedicated 3D Chart control for React. This specialized tool offers a unique way to elevate your data presentations through immersive 3D visualizations. In this installment, we’ll demonstrate how to create a 3D Column Chart to illustrate the top 10 countries leading in renewable energy investment.
Let’s get started!
Using Syncfusion® React 3D Charts to display global leaders in renewable energy investment
Syncfusion React 3D Charts are a powerful component that offers a more immersive and comprehensive way to understand data patterns. To get started with React 3D Charts, check out our documentation.
Follow the steps below to create a compelling 3D Column Chart using the Syncfusion React Chart control, showcasing the top 10 countries in the renewable energy sector.
Step 1: Gather and analyze renewable energy investment data for global markets
Start by collecting accurate data from reputable sources to ensure the integrity of your visualization. For instance, Energy Digital provides a comprehensive look at countries excelling in renewable energy usage. This foundational step is crucial as it underpins the accuracy and reliability of your entire chart.
Step 2: Preparing data for the 3D Chart
After gathering the data, the next step is to organize it in a format that is suitable for creating visual representations. In this context
The country property will be shown along the horizontal axis to represent each country.
The percentage property will be plotted on the vertical axis to indicate the renewable energy usage percentages.
Distinct colors will be used for each data point to improve visual differentiation.
Here’s a sample code snippet to prepare your data,
export let renewableEnergy: Object[] = [
{country: 'Iceland', percentage: 86.87, color: '#00A9D3'},
{country: 'Norway', percentage: 71.56, color: '#1E60A8'},
{country: 'Sweden', percentage: 50.92, color: '#A4D4A0'},
{country: 'Brazil', percentage: 46.22, color: '#FF7043'},
{country: 'New Zealand', percentage: 40.22, color: '#66BB6A'},
{country: 'Denmark', percentage: 39.25, color: '#FF6F61'},
{country: 'Austria', percentage: 37.48, color: '#F0F0F0'},
{country: 'Switzerland', percentage: 36.72, color: '#00B5E2'},
{country: 'Finland', percentage: 34.61, color: '#2F9E71'},
{country: 'Colombia', percentage: 33.02, color: '#FFEB3B'}
];
Step 3: Binding the data to the Syncfusion® React Charts
Integrating data on the top 10 countries consuming renewable energy into a Syncfusion React Chart is straightforward using the Chart3DSeriesDirective. This directive allows you to bind the data source via the dataSource property, specify the X and Y values using the xName and yName properties, and customize the chart’s appearance to suit your needs.
Here’s the complete code example for binding the data,
<Chart3DSeriesCollectionDirective>
<Chart3DSeriesDirective dataSource={renewableEnergy} xName="country" yName="percentage" type="Column" pointColorMapping="color"></Chart3DSeriesDirective>
</Chart3DSeriesCollectionDirective>
Adding the title and subtitle for the chart
You can add a title and subtitle to the chart by using the title and subTitle properties in the chart configuration.
Here’s an example code to add the title and subtitle,
<Chart3DComponent
id="charts"
title="Global Leaders in Renewable Energy Investment"
subTitle="Comparing the Top 10 Countries Based on Renewable Energy Investment Attractiveness Scores">
</Chart3DComponent>
Customizing the axis labels
You can customize the axis labels by adjusting the font size and color using the size and color properties in the labelStyle of the primaryXAxis and primaryYAxis. Additionally, the labelFormat property in the primaryYAxis allows you to define a custom format for the labels.
Refer to the following code for customizing the axis labels,
<Chart3DComponent
primaryXAxis={{
labelStyle: {
color: '#1D3557'
}
}}
primaryYAxis={{
labelFormat: '{value}%',
labelStyle: {
color: '#1D3557'
}
}}>
</Chart3DComponent>
Customizing the chart area
You can enable chart rotation by setting the enableRotation property to true in the chart configuration. You can define the rotation angle using the rotation property and adjust the slope angle for the 3D chart with the tilt property. Additionally, the depth of the 3D chart from the front view of the series to the background wall can be controlled using the depth property.
Refer to the following code for customizing the chart area,
<Chart3DComponent
id="charts"
style={{ textAlign: 'center' }}
enableRotation={true}
rotation={10}
tilt={5}
depth={100}>
</Chart3DComponent>
Adding the data label
To display data labels in the chart, set the visible property within the dataLabel settings of the chart series. To enable rendering of data labels, inject the DataLabel3D service into the chart. You can position the data labels at the top, bottom, or middle by configuring the position property. Additionally, you can customize the font style of the data labels using the font property within the dataLabel settings.
Refer to the following code to customize the data label,
<Chart3DComponent><
<Inject services={[DataLabel3D]}/>
<Chart3DSeriesCollectionDirective>
<Chart3DSeriesDirective
dataLabel={{
visible: true,
enableRotation: true,
angle: 90,
font: {
color: '#1D3557',
size: '11px',
fontWeight: 'bold'
}
}}
</Chart3DSeriesDirective>
</Chart3DSeriesCollectionDirective>
</Chart3DComponent>
Adding the tooltip
To enable the tooltip in the chart, set the enable property to true within the chart’s tooltip settings. Ensure that the Tooltip3D service is injected into the chart’s services to render it. You can customize the tooltip’s appearance by setting the fill property to specify the background color. Additionally, use the format property to define the tooltip’s content format.
Refer to the following code to add the tooltip,
<Chart3DComponent
tooltip={{
enable: true,
header: '${point.x}',
enableMarker: false,
fill: '#ffffff',
format: 'Invest percentage: <b>${point.y}</b>'
}}
<Inject services={[Tooltip3D]} />
</Chart3DComponent>
With these enhancements, you can create a comprehensive and interactive visualization of the top 10 countries in renewable energy investment. This provides viewers with an engaging way to interpret complex data insights at a glance. The output will be displayed in the image below.
A React chart showing the top 10 countries for renewable energy investment
Reference
For more information, refer to the StackBlitz demo.
Conclusion
Thank you for reading! In this article, we explored the top 10 countries leading in renewable energy investment using Syncfusion React 3D Charts. By leveraging these charts, we enhanced the user experience and the clarity of these important data insights.
The new version of Essential Studio® is available for current customers from the license and downloads page. If you are not a Syncfusion customer, try our 30-day free trial to check out our newest features.
If you have queries, contact us through our support forums, support portal, or feedback portal. We are always happy to assist you. Happy coding!
Related Blogs
Subscribe to my newsletter
Read articles from syncfusion directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
syncfusion
syncfusion
Syncfusion provides third-party UI components for React, Vue, Angular, JavaScript, Blazor, .NET MAUI, ASP.NET MVC, Core, WinForms, WPF, UWP and Xamarin.