ApexCharts is a modern Javascript library to create beautiful and interactive charts.
Questions tagged [apexcharts]
996 questions
5
votes
2 answers
Cannot get data formatted correctly for apexcharts
I receive data like this from an API
{
"Bob Knight": 30774.72000002,
"Samuel Herman": 10310.61000004,
"Lucie Perry": 26308.41,
"Andreas Smith": 8960.189999999999,
"Frederic Smith": 2029.5000000599998,
}
I'm trying to display…

Will Rollason
- 125
- 1
- 1
- 10
5
votes
1 answer
How can I set custom tooltips with values of an array in a heatmap apexchart?
I'm using the heatmap chart from apexcharts and I want to customize the tooltips. For each number of the data I want to provide a matching description as a string. The description values are stored in a simple array like this:
let chartLabels =…

Nadine
- 357
- 1
- 5
- 16
5
votes
2 answers
Apex Charts tooltip formatter: how to convert number to string
I am trying to show y value of a line graph in tooltips (apexcharts). The original data is set in string format in series {'8:50 AM', '11:00 AM', '9:02 AM'...}, but they appear as '8', '11', '9'... in tooltips, rounded up in number format. I do not…

user1427468
- 123
- 1
- 2
- 8
5
votes
2 answers
Click event with react-apexcharts
I'm using react-apexcharts and I want to add an event on a pie chart once users click on one of the sections. Here is my chart:

jim
- 1,026
- 2
- 15
- 37
5
votes
2 answers
Vue: Cannot call a class as a function Apex
I am trying to add a pie chart to my website using ApexCharts. I've copied source code from their website but I received error "Cannot call a class as a function" in my website's console.
Error disappears when I delete this line:

Kamor04
- 307
- 1
- 5
- 13
5
votes
2 answers
ApexCharts How to update y-axis scales dynamically?
I am using ApexCharts with the Vue wrapper. I can successfully change the min and max values by setting them with a function. this.options.yaxis[0].min = Number(4500); for example, when I log it out in the console, the value is what I set it to.…

James Weeks
- 101
- 1
- 4
4
votes
1 answer
Apexcharts: Changing opacity of squares when mouseover a series label (:: hover)
I have a heatmap chart using apex-charts (https://apexcharts.com/react-chart-demos/heatmap-charts/).
When i mouseover a series label (1) the color stays the same (2) and change opacity of the others series (3).
I would like to change the opacity of…

lmalmeida
- 135
- 2
- 14
4
votes
2 answers
apexchart method in react
I'm working with apexcharts and react. And I need to hide a series but I don't know how to implements the methods in my code. The idea is use the data4 to make some calculations and show it on a custom tooltip. How can I hide the data4 in the chart…

Ricardodrn
- 51
- 3
4
votes
1 answer
how to set different color every bar ApexChart
I'm using ApexChart for a project, and I want to set different colors for each bar. I pass the data array and the color array to the component, based on the color array index the relevant data bar should be colored.
Current implementation as below,…

Sudaraka Senevirathne
- 191
- 5
- 9
4
votes
1 answer
ApexCharts in Vue changing options does not work
When I switch between two different charts(that both have different series and options) from ApexChart using v-if that have different chart options set there is some kind of bug that does makes the changed chart not render correctly.

DockerUser12
- 73
- 5
4
votes
1 answer
Apexcharts with custom tooltip with link is not possible to click
I'm trying to create a custom tooltip in apexCharts heatmap using the custom parameter to add code, in this case a specific link
tooltip: {
custom: function({ series, seriesIndex, dataPointIndex, w }) {
// code to…

Daniel Nilsson
- 51
- 6
4
votes
0 answers
React Apexchart Timeline Chart Unusable with Large Amounts of Data
I'm looking to use React Apexchart's Timeline Chart to make a beautiful Gantt chart. However, the data I'm graphing could have several "Tasks" (y-axis labels) and each y-axis label could have dozens of "Action Items" associated with it. These Action…

EsotericLanguage
- 87
- 2
- 12
4
votes
0 answers
How to update data on zoom in apexchart
I am trying to find a way in the apex chart. By which if user zoom on the year graph then the user should be able to get month data when they zoom on month data this should show the day data.
But I am not able to figure out if its possible in apex…

aditya kumar
- 2,905
- 10
- 39
- 79
4
votes
1 answer
How to use different colors in Apex charts with a condition?
I am using an Apexcharts treemap chart and want to apply different colors.
If type the data is of type 'a' I want it in one color and if it's of type 'b' I want another color.
My data:
const TreeData = [
{
data: [
…

Akash
- 21
- 1
- 3
4
votes
1 answer
ApexCharts Cannot read property 'appendSeries' of undefined
I'm trying to add a new series to my ApexCharts (in ngOnInit) but it keeps telling me, that my chart is undefined, even though i initialized it in the constructor. I've choosen the "multiple series- group rows" chart, which you can find on the…

manti13
- 91
- 3
- 10