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