7/19/2021 Series [Working with Data] – ApexCharts.
js
APEXCHARTS ☰ DEMOS FEATURES DOCS DOWNLOAD
SUPPORT APEXCHARTS
Series [Working with Data]
ApexCharts Fusio
Search...
The series is a set of data. You may ApexCharts is now a partn…
Get Started have single or multiple data series.
The series object can be of the Are you looking for more
Chart Essentials
following format: advanced chart types and
Series [Working with Data] data-driven maps?
Responsive 1). Single values
Get a FusionCharts
Animations
series:[{
license at a 20%
Annotations data: [23, 34, 12, 54, 32 discount and join
}]
DataLabels 750,000+ other
developers across the
Events
globe.
where all the values in the data
Interactivity (Zoom, Scroll, Pan)
array indicates y axes values
Formatting EXPLORE FUSIONCHART
Localization
Example
GET A FUSIONCHARTS
* Use the coupon to get
Tooltip Data in this format is considered a LICENSE
a 20% off.
Grid category chart by default and the Just for ApexCharts
categories has to be provided in Users!
Legend
xaxis.categories property Coupon: AFC201920
Chart Types like this
Design xaxis:{
categories: ["Jan", "Feb"
Integrations }
How to
Options (Reference) The “single values” format
is easier for category chart like
Methods
column-chart/bar-chart where
Export you need to show comparisons
between categories of data
2). Paired values
2.1) Numeric Paired Values in
two-dimensional array
https://apexcharts.com/docs/series/ 1/4
7/19/2021 Series [Working with Data] – ApexCharts.js
series: [{
APEXCHARTS ☰data: [[1, 34], [3, 54],
}],
DEMOS FEATURES DOCS DOWNLOAD
xaxis: {
type: 'numeric'
}
SUPPORT APEXCHARTS
Search... where the 1st index is the x axes
value and the 2nd index is the y
Get Started axes value. Make sure to set the
xaxis type to numeric as shown
Chart Essentials above.
Series [Working with Data] Example
Responsive
2.2) Numeric paired values in
Animations
XY properties
Annotations
DataLabels Another way to create a numeric
Events paired series is to pass the XY
values as an object as shown
Interactivity (Zoom, Scroll, Pan)
below. Here also, don’t forget to
Formatting set the
Localization xaxis.type: 'numeric' as
the X values contain numbers.
Tooltip
Grid
series: [{
Legend
data: [{
Chart Types x: 20,
y: 54
Design }, {
x: 30,
Integrations y: 66
}],
}],
How to
xaxis: {
type: 'numeric'
Options (Reference)
}
Methods
Export 2.3) Category paired values
Instead of providing a separate
xaxis.categories array, you
can also provide a category (x
value) along with the y value.
Notice, the x property can
https://apexcharts.com/docs/series/ 2/4
7/19/2021 Series [Working with Data] – ApexCharts.js
accept a string value unlike
APEXCHARTS ☰
number in previous example.
DEMOS FEATURES DOCS DOWNLOAD
series: [{
data: [{
SUPPORT APEXCHARTS
x: 'Apple',
y: 54
Search... }, {
x: 'Orange',
y: 66
Get Started }],
}],
Chart Essentials xaxis: {
type: 'category'
Series [Working with Data] }
Responsive
Animations
Annotations Certain chart-types like
Treemap only accepts this
DataLabels
format. This format is also
Events helpful in adding additional
Interactivity (Zoom, Scroll, Pan) information along with the
data-point that may be used in
Formatting
other places (for eg., in tooltip,
Localization
datalabels, etc)
Tooltip
Grid
3). Timeline Series
Legend
To plot a timeline series you need
Chart Types
to either provide timestamp
Design
values in the following manner
Integrations 3.1) Timestamps
How to series: [{
data: [[1324508400000, 34
Options (Reference) }]
Methods
Example
Export
or you can provide date strings in
the following way
3.2) Date strings
series: [{
data: [{ x: '05/06/2014',
https://apexcharts.com/docs/series/ 3/4
7/19/2021 Series [Working with Data] – ApexCharts.js
}]
APEXCHARTS ☰ DEMOS FEATURES DOCS DOWNLOAD
The DateTime String which you
provide should return true
SUPPORT APEXCHARTS when parsed through JavaScript’s
Date.parse() function
Search... Example
Get Started 4). Data for
Chart Essentials Pie/Donuts/RadialBars
Series [Working with Data] The series expects a single array
Responsive for pie/donut and radialbar charts.
The names of the series values are
Animations
to be provided in labels
Annotations
property.
DataLabels
series: [23, 11, 54, 72, 12
Events
labels: ["Apple", "Mango",
Interactivity (Zoom, Scroll, Pan)
Formatting
Localization
Tooltip
Grid
Legend
Chart Types
Design
Integrations
How to
Options (Reference)
Methods
Export
https://apexcharts.com/docs/series/ 4/4
