Donut charts are a well-known, accessible and visually appealing way to visualise data insights. They may be considered a more basic chart, but they can fuel top-level business and marketing decisions, making them an integral feature for data dashboards.
If you want to know how to create a donut chart in React that's suitable for high-level decision-makers, we'll show you how to do exactly that using SciChart.js. We'll also focus on how to customise and add interactive elements to engage your end users and tailor the design to your branding.
Business Benefits of a React Donut Chart
Some prefer the donut chart over the pie chart thanks to its more minimal, less crowded data visualisation. You also have the option to overlay one chart on top of the other for the ultimate space-saving solution on your data dashboard.
With a responsive React chart library, the data will automatically update the React donut chart whenever new information is received. That means your dashboard will always be up to date and won't need to be manually tweaked every time the numbers change.
React donut charts are best suited to small datasets. They are ideal for comparing between two and six categories to avoid overloading the display. With the right chart library, you can tap into the true power of a React donut chart with minimal development time.
The high-level insights you can gain with minimal effort go a long way, so here is a sample of business use cases to help visualise the possibilities.
Example Business Use Cases of Donut Charts
Customer Demographics: By visualising the number of customers per country, businesses can better understand where their main customer base is and where to target their marketing efforts.
Customer Segmentation: By separating customers based on whether they are new or returning, your marketing team can be informed on how best to split their marketing budget.
Sales Distribution: A go-to chart for business and marketing reports, it's a quick way to show directors and stakeholders in a board meeting which product categories are driving the most sales and which are lagging behind.
Budget Allocation Overview: Beyond marketing, a donut chart can show how a department or company allocates its budget (e.g. marketing, R&D, operations). This helps facilitate budget reviews and informed reallocation discussions.
Setting Up Your React Project
Using our open-source library, scichart-react, we make it easy to create donut charts (and a plethora of other charts) in React. We have a step-by-step walkthrough that makes it easy for your developers to set up their first React project.
Creating a Basic Donut Chart in React with SciChart
To create a donut chart, create PieSegment instances and add them to the SciChartPieSurface.pieSegments collection.
Set sciChartPieSurface.pieType = EPieType.Donut to enable a donut chart. The sciChartPieSurface.holeRadius property then sets the size of the donut hole.
Each PieSegment has properties for value, text and color, or colorLinearGradient if you want a gradient fill. The isSelected property denotes whether the PieSegment is in the selected state.
const sciChartPieSurface = await SciChartPieSurface.create(divElementId);
const theme = { ...new SciChartJSLightTheme() };
theme.sciChartBackground = "Transparent";
sciChartPieSurface.applyTheme(theme);
sciChartPieSurface.pieType = EPieType.Donut;
sciChartPieSurface.holeRadius = 0.6;
sciChartPieSurface.legend.showLegend = true;
sciChartPieSurface.animationFrames = 60;
sciChartPieSurface.labelStyle = { fontSize: 14, color: EColor.White };
const pieSegment1 = new PieSegment({
color: EColor.Green,
value: 10,
text: "Green",
delta: 10,
});
const pieSegment2 = new PieSegment({
color: EColor.Red,
value: 20,
text: "Red",
delta: 20,
});
const pieSegment3 = new PieSegment({
color: EColor.Blue,
value: 30,
text: "Blue",
delta: 30,
});
const pieSegment4 = new PieSegment({
color: EColor.Orange,
value: 40,
text: "Orange",
delta: 40,
});
sciChartPieSurface.pieSegments.add(pieSegment1, pieSegment2, pieSegment3, pieSegment4);
Helpful Links
- 🔗 Set Up with React
- 🔗 React Donut Chart Demo
- 🔗 GitHub Donut Chart
How to Style a Donut Chart with SciChart
With SciChart, you can tailor the design of the segments to suit your needs. This includes support for dynamic theming to create custom, on-brand experiences, and dark mode to make the data accessible to more users.
Detailed documentation on styling donut chart segments and formatting labels can be found on the Pie Chart documentation page.
Examples of Styling Options
To add a gradient: Set PieSegment.colorLinearGradient
const pieSegment1 = new PieSegment({
color: EColor.Green,
value: 10,
text: "Green",
delta: 10,
colorLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
{ color: "#1D976C", offset: 0 },
{ color: "#93F9B9", offset: 1 },
]),
});
const pieSegment2 = new PieSegment({
color: EColor.Red,
value: 20,
text: "Red",
delta: 20,
colorLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
{ color: "#DD5E89", offset: 0 },
{ color: "#F7BB97", offset: 1 },
]),
});
const pieSegment3 = new PieSegment({
color: EColor.Blue,
value: 30,
text: "Blue",
delta: 30,
colorLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
{ color: "#2b2828", offset: 0 },
{ color: "#656565", offset: 1 },
]),
});
const pieSegment4 = new PieSegment({
color: EColor.Yellow,
value: 40,
text: "Yellow",
delta: 40,
colorLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
{ color: "#F09819", offset: 0 },
{ color: "#EDDE5D", offset: 1 },
]),
});
To add padding between pie segments: Set SciChartPieSurface.seriesSpacing
sciChartPieSurface.seriesSpacing = 10;
To set a global label font size, colour and family: Set SciChartPieSurface.labelStyle
sciChartPieSurface.labelStyle = { fontFamily: "Arial", fontSize: 20, color: EColor.White };
To set a general label text override: Use SciChartPieSurface.labelProvider.getSegmentText
const labelProvider = new PieLabelProvider();
labelProvider.getSegmentText = (segment: IPieSegment, total: number) =>
`<span>${segment.text}</span><br/><span>${segment.value.toFixed(1)} (${(
(100 * segment.value) / total
).toFixed(1)}%)</span>`;
sciChartPieSurface.labelProvider = labelProvider;
To move labels further away from the pie segment: Set PieSegment.labelOffset
pieSegment1.labelOffset = new Point(10, 10);
To set an individual pie segment's font and colour: Set PieSegment.labelStyle
pieSegment1.labelStyle = { fontFamily: "Arial", fontSize: 20, color: EColor.White };
To make a pie segment larger or smaller: Set PieSegment.radiusAdjustment
pieSegment1.radiusAdjustment = 0.3;
LabelProviders are also available on each segment via the PieSegment.labelProvider property:
pieSegment1.labelProvider.formatLabel = (value: number) =>
`<span style="color: purple; font-family: Arial, sans-serif; font-size: 2em;">${value.toFixed(
3
)}</span><span style="font-size: 2em;">$</span>`;
How to Change the Size of Your Donut Chart in React
Working with SciChart puts you in the driving seat when building your chart. You start with the basic elements, then level them up and customise them to match your exact design requirements. This includes the size of the donut hole (holeRadius) and the segments (radiusAdjustment).
Making the Donut Chart Dynamic
If you want to add more dynamic elements, you can add tooltips and customisable labels. The beauty of tooltips is that you can add more information without cluttering the display, so users can engage with the data that matters to them. For instance, you could add exact percentages and amounts, or more context behind each segment, which only displays when a user hovers over or clicks that segment.
Donut charts can be dynamically updated by setting the PieSegment.value property. When SciChartPieSurface.animate is true, updates to the chart will be animated.
Why Use SciChart for Donut Charts in React?
SciChart's exceptional customisation abilities and easy-to-use interface are two reasons it's the library of choice for developers. We offer hundreds of documentation pages and a 64-bit library that can handle millions of data points in real time. With cross-platform performance, it's also easy to make your data visualisations compatible across various systems and hardware devices.
Our flexible chart library lets you tailor designs to the exact finish you want to present to your end users. This gives you more control than the basic out-of-the-box designs that most open-source chart libraries restrict you to.
Create Your React Donut Chart with SciChart
We're known for high-performance charting software that renders huge volumes of data in real time (think millions of data points). But that's not all we're known for. When it comes to developer support, we offer exemplary customer service and advice. From extensive documentation, examples and demos to responsive community forums and support from our development team, SciChart is designed to be as intuitive and user-friendly as possible, while blowing the competition out of the water when it comes to design customisation.
Top comments (0)