When it comes to the world of research, it is crucial to share your findings with your audience. One of the most common ways to do so is by using charts.
So how do you render your graphs on your website? One method is using images. In some cases, this is perfectly fine. However, there is one tiny issue in this case: sometimes, images don’t render well on high-pixel screens. Moreover, they become blurry when enlarged.
To mitigate this, you would have to increase the graphic’s resolution. But this will lead to another problem: larger images take up more memory and thus take a longer time to load. How do we get rid of this problem?
Luckily, this is where ApexCharts.js comes in. It is an easy-to-use, open source library that allows you to build interactive charts for your project.
Here are some of its features:
- Responsiveness: Your charts will scale according to the viewing device. This contributes to a better UI for all devices
- Annotations: Apex also allows you to put labels on your charts, thus helping the reader understand the graphics with ease
- Animations: Just like annotations, animations bring a better user experience. The best part? You can even customize the look and feel of your animation
Getting started with ApexCharts
Before materializing a chart, we first need to initialize a React project:
npx create-react-app apex-tutorial
Next, to install the required dependencies, execute the following terminal command:
npm install apexcharts react-apexcharts
Bar charts
Bar charts are useful when you want to exhibit a comparison of values across various subgroups of your data. One notable example is comparing heights between multiple skyscrapers.
Displaying integers on the x-axis
We will replicate this sample data from Math Goodies:
This piece of code renders a basic bar chart using the data above:
export default function SampleLine() { const series = [ { name: "Temperature in Fahrenheit", //will be displayed on the y-axis data: [43, 53, 50, 57] } ]; const options = { chart: { id: "simple-bar" }, xaxis: { categories: [1, 2, 3, 4] //will be displayed on the x-asis } }; return ( <div> <Chart options={options} type="bar" series={series} width="80%" /> </div> ); }
As you can see, the Chart
component accepts three important props:
- The
options
prop specifies the configuration of the graph. Here, we have specified the labels for the x-axis - The
type
prop tells ApexCharts which kind of chart we want to display. In this case, we are rendering a bar chart - The
series
prop contains the data that we want to display. Apex will display this on the y-axis
Displaying strings on the x-axis
For this example, we will load this dataset from Statistics How To:
We can render this data by writing the following code:
const series = [ { name: "Height in feet", data: [2722, 2080, 2063, 1972, 1516], }, ]; const options = { chart: { id: "simple-bar", }, xaxis: { categories: [ "Burj Khalifa", "Tokyo Sky Tree", "KVLY-TV mast", "Abraj Al-Bait Towers", "Bren Tower", ], }, }; return ( <div> <Chart options={options} type="bar" series={series} width="80%" /> </div> );
Notice that this time, we have passed in an array of string values into the xaxis.categories
property. No further configuration was needed!
This will be the output of the program:
Changing the orientation of a chart
By default, Apex displays our charts in vertical orientation. You can render them horizontally by using the option.plotOptions.bar.horizontal
property:
const options = { plotOptions: { bar: { horizontal: true, //horizontal bar chart }, }, //extra code removed for brevity }; return ( <div> <Chart options={options} type="bar" series={series} width="80%" /> </div> );
In the snippet above, we set the horizontal
property to true
. This will flip the chart’s orientation.
Pie and donut charts
Pie charts allow you to show data in terms of percentages or ratios.
To demonstrate pie charts, we will use this dataset from Math Is Fun:
Just like bar charts, building pie charts is easy. To do so, you need to pass in your data and assign the type
prop to pie
like so:
const options = { labels: ["Comedy", "Action", "Romance", "Drama", "SciFi"] }; const series = [4, 5, 6, 1, 5]; //our data return ( <div className="donut"> <Chart options={options} series={series} type="pie" width="380" /> </div> );
Here, the options.label
property contains an array. Each element in this array corresponds to a section in the chart. Later on, we changed the type
prop to pie
. This will tell Apex to render a pie chart.
To morph this into a donut chart, modify the value of type
to donut
:
<Chart options={options} series={series} type="donut" width="380" />
Line charts
This type of chart is common when you want to depict trends or behaviors with respect to time.
As an example, we will use this table from Chartio:
Rendering single values
To get started with line charts, let’s display the Guests
column only. In the next section, we will display both Guests
and Subscribers
in the same graph.
The following code renders information from the Guests
array:
const series = [ { name: "Guests", data: [19, 22, 20, 26] } ]; const options = { xaxis: { categories: ["2019-05-01", "2019-05-02", "2019-05-03", "2019-05-04"] } }; return <Chart type="line" series={series} options={options} />;
In this piece of code, we are rendering the Guests
field. Furthermore, we have also used date values on our x-axis. Apex will automatically parse these values and display them as a timeline.
Rendering multiple values
The Apex library also allows users to plot multiple datasets in the same graph.
Here, we will render both the Guests
and Subscribers
data this time.
To add more data to your sheet, append another object to the series
array like so:
const series = [ { name: "Guests", data: [19, 22, 20, 26], }, //additional data in this array.. { name: "Subs", data: [103, 105, 98, 83], }, ];
This will be the result:
Combo charts
In some cases, it is common to display multiple chart types in one figure. One such example can be to couple a bar chart and a line chart together.
To do this with Apex Charts, you can specify the type
property in the series
array like so:
const series = [ { type: "line", //render a line chart for this data name: "Guests", data: [19, 22, 20, 26], }, { type: "column", //use column chart here. name: "Subscribers", data: [103, 105, 98, 83], }, ]; return ( <div> <Chart options={options} type="line" series={series} width="80%" /> </div> );
Here, we are rendering the Guests
data in a line graph. Later on, we told React to represent the Subscribers
dataset with a bar (column
) chart.
Stroke customization
Apex even offers developers the option to customize the look of their lines.
To opt for a smoother looking line, change the options.stroke.curve
property to smooth
:
const guestOption = { stroke: { curve: "smooth", }, //.. }; return ( <div> <Chart type="line" series={guestSeries} options={guestOption} width={500} /> </div> );
If you want to use a stepline curve, change the curve
option to stepline
:
const guestOption = { stroke: { curve: "stepline", }, //further code...
Radial charts
Radial charts are suitable for indicating progress. An example is showing the progress of a file download:
const series = [70]; //70 percent const options = { labels: ["Progress"], //label of this diagram }; return <Chart type="radialBar" series={series} options={options} />;
This time, we set the type
property to radialBar
. This will display a circular gauge on the page.
Creating a loader bar
To showcase the capabilities of the radial bar, we will build a simple loading bar using ApexCharts:
const [progress, setProgress] = useState(0); let interval = useRef(null); useEffect(() => { interval.current = setInterval(() => { setProgress((old) => old + 50); }, 1000); return () => { clearInterval(interval.current); }; }, []); useEffect(() => { if (progress < 100) return; clearInterval(interval.current); }, [progress]); const series = [progress]; //70 percent return <Chart type="radialBar" series={series} options={options} width={500} />;
Here is an explanation of this code:
- Here, we used an
interval
Hook. This is an instance ofuseRef
and will be responsible for controlling our interval throughout the application’s lifecycle - Furthermore, when the component mounts to the UI, we told React to run a
setInterval
method. This will increment the value ofprogress
by50
units - Every time the
progress
Hook changes, the app will check if its value exceeds100
. If this condition is met, React will remove the interval from memory. As a result, the program stops incrementing the value ofprogress
Synchronized Graphs
If you have multiple charts with the same x-axis values, it might be good to visualize them through synced charts.
Criteria
Using synced charts in your app is an effortless process, but you have to ensure that your code meets the following conditions:
- The
xaxis.categories
are the same for all graphs - The
chart.group
option should be identical. Otherwise, Apex won’t sync your charts - The dimensions (
width
andheight
properties) should also be similar options.id
should be different for each graph. This allows the library to identify each figure and render them to the screen
Simple usage
The snippet of code below will display the guests
and subscribers
graphs and sync them together:
//create series and options for our 'guests' data const guestSeries = [ { name: "Guests", data: [19, 22, 20, 26], }, ]; const guestOption = { chart: { id: "guest", group: "social", }, xaxis: { categories: ["2019-05-01", "2019-05-02", "2019-05-03", "2019-05-04"], }, }; //create series and options for our 'subscribers' data const subSeries = [ { name: "Subs", data: [103, 105, 98, 83], }, ]; const subOptions = { chart: { id: "Subs", group: "social", //group name same as guestOptions }, xaxis: { categories: ["2019-05-01", "2019-05-02", "2019-05-03", "2019-05-04"], }, }; return ( <div> <Chart type="line" series={subSeries} options={subOptions} width={500} /> <Chart type="line" series={guestSeries} options={guestOption} width={500} /> </div> );
In this piece of code, we created a series
and an options
object for each dataset. It is also important to notice that our group
property and the x-axis values of each set are identical. This allows Apex to render the charts and pair them together to build synchronized charts.
This will be the output:
Animations
As stated earlier, Apex lets developers modify graph animations to suit their needs. In this section, we will cover some important properties that allow control over the animation.
Disabling all animations
To remove animations entirely, assign the options.chart.animations.enabled
property to false
:
const guestOption = { chart: { animations: { enabled: false, //no animations }, }, //unnecessary code redacted.. }; return ( <div> <Chart options={guestOption} series={series} type="line" /> </div> );
The code above tells React to render the charts and remove the animations.
Changing speed
You can speed up or slow down your animations via the speed
property. The default value is 800
.
In the code below, we are accelerating our animation:
const options = { chart: { id: "simple-bar", animations: { speed: 100, //make the transition faster }, //further code..
To make the animation slower, increase the value of speed
like so:
const options = { chart: { id: "simple-bar", animations: { speed: 1900, //make the transition slower }, //further code..
Conclusion
You can find the source code for this program in this CodeSandbox.
In this guide, we discussed a handful of important graphs and concepts to help you get started with the Apex charting library. If you want to render graphs in your web app, then Apex Charts will be a great fit for your arsenal. The lines of code required to render your charts are minimal, thus reducing boilerplate code.
Thank you so much for reading!
Cut through the noise of traditional React error reporting with LogRocket
LogRocket is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.

Focus on the React bugs that matter — try LogRocket today.