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
[Link] 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
[Link] 1/4
7/19/2021 Series [Working with Data] – [Link]
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 [Link]: '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
[Link] array, you
can also provide a category (x
value) along with the y value.
Notice, the x property can
[Link] 2/4
7/19/2021 Series [Working with Data] – [Link]
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',
[Link] 3/4
7/19/2021 Series [Working with Data] – [Link]
}]
APEXCHARTS ☰ DEMOS FEATURES DOCS DOWNLOAD
The DateTime String which you
provide should return true
SUPPORT APEXCHARTS when parsed through JavaScript’s
[Link]() 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
[Link] 4/4
