ApexCharts is a modern Javascript library to create beautiful and interactive charts.
Questions tagged [apexcharts]
996 questions
6
votes
1 answer
What do I do when two angular libraries have an attribute name conflict?
I'm writing an angular application using two libraries: ngx-bootstrap and ng-apexcharts. ApexCharts provides an angular component, called that takes an input called tooltip of type ApexTooltip. The html looks like this:

Paul B
- 135
- 1
- 6
6
votes
0 answers
Vue tool tip in apex bar chart for label name Y axis
If word length is too long, I want to show the Vue tooltip or on hover, I need to show the full name of the label. I tried to research a lot, but nothing…

Sam
- 149
- 4
- 15
6
votes
1 answer
Apexcharts - hover on a very small column
I have a situation while using apexcharts when one of the columns is very small. Its difficult to render the tooltip because you have to be very careful to hover the column.
Question: is there a way to extend the hover area so its easier to hover…

underfrankenwood
- 431
- 1
- 7
- 22
6
votes
0 answers
React apex chart does not render after series array changes
You will find answer in this post
I am new with react I used apexcharts which worked really fine but whenI had to use this chart components, in other components too, in the same project. Thats where i got a problem in a chart. Suddenly 1 of my chart…

GameChanger
- 378
- 5
- 16
6
votes
1 answer
Setting height of a chart in Apexcharts
I am trying to set the height of a chart in Apexcharts, but it seems to only work in responsive mode, no matter what I try.
Any idea?
Here is a Codesandbox (it's the basic example from their docs, plus I added a height).
Thanks for any help.

akmur
- 1,465
- 2
- 24
- 37
6
votes
1 answer
Apexcharts xaxis formatting fails when using datetime type
I use vue-apexcharts to plot charts in a dashboard. I created a generic file that contains the base options for all charts (to uniformize styling and code reusability) and I extend/override this object with a mergeDeep() function when necessary.…

markusand
- 235
- 7
- 18
6
votes
2 answers
Apexcharts remove old data series before render new series
I'm using apex chart for simple data visualization from json output. My charts based on pure javascript and not Vue or other frameworks.
My json (php) backend create two json outputs fro draw the chart as below
JSON 1
{
"x": "2019-05-27…

rafalefighter
- 714
- 2
- 11
- 39
6
votes
4 answers
How to load component after a tab is clicked on Vue JS with Bootstrap Vue?
I have the following code in HTML (coded with Vue JS & Bootstrap):
Page View graph here

Duncan Hui
- 247
- 2
- 4
- 11
5
votes
1 answer
apex chart donut items border raduis
I am looking to make my donut chart items corners round please guide
what I want
what I have made
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
const series = [54, 45];
const options: ApexCharts.ApexOptions = {
…

rao haseeb
- 63
- 4
5
votes
3 answers
How to set color area when value less than zero use Apexcharts
This is my script options, use apexcharts chart
And my script
var options = {
series: [{
name: 'Profit',
data:…

Hai Truong IT
- 4,126
- 13
- 55
- 102
5
votes
1 answer
Rounded Charts using ApexCharts
I saw this post on GitHub about rounded bar charts (https://github.com/apexcharts/apexcharts.js/issues/422) and was wondering how to round the bottom of the chart
I am using version 3.27.3.
I want my charts to look like this:
Sausage Chart
And at…

Radu Lupascu
- 51
- 1
- 3
5
votes
0 answers
Apex Charts height of sidebar
i am using the library apexCharts to build some charts in a project i`m working on.
This specific PieChart is loading the number of tries of a certain action, and it shows them in the side bar labels.
Recently i loaded a chart with a lot of tries…

Pedro Ferreira
- 301
- 3
- 11
5
votes
1 answer
In heatmap apexcharts how can we remove duplicate x axis labels?
How can I remove the duplicates from x axis labels in heatmap apexcharts
Here the JSFiddle Link
click here
Here multiple May months are showing I need to display only one in the Middle of 4 columns.
I tried the below
xaxis: {
labels:…

user1187
- 2,116
- 8
- 41
- 74
5
votes
1 answer
ApexCharts.js line chart - Show zero for missing dates
I'm populating a series with "date-value pairs like this:
series: [{
name: "Price",
data:[
[1486684800000, 38],
[1486771200000, 0],
…

IdoS
- 482
- 1
- 10
- 18
5
votes
2 answers
How to add custom tooltip items to Apexcharts?
I am using ApexChart and I would like to add som more info to the tooltip (that shows on hover). I have read the documentation but I really don´t understand how to do it.
My problem is that I don't understand where I should add that extra data and…

Hejhejhej123
- 875
- 4
- 12
- 25