Questions tagged [apexcharts]
ApexCharts is a modern Javascript library to create beautiful and interactive charts.
apexcharts
1,072
questions
0
votes
0
answers
8
views
Ratio between data in ApexChart bar is too great making small bars impossible to see and to hit. How to resolve?
I have the following ApexChart bar:
var ivaAnnualeOption = {
series: [{
name: 'Saldo IVA',
data: [3500, -53, -30000, -1000, -2000, 1500, 500, 0, 0, 0, 0, 0]
}],
chart: {
type: 'bar',
...
- 93
0
votes
0
answers
5
views
Nextjs Apexchart not showing in production
I've been working on a Next.js application, and everything works perfectly in the development environment, but in production i can't see my area(chart).
So, when I build the application using npm run ...
- 542
0
votes
1
answer
17
views
Getting stuck on apexcharts / Blazor-ApexCharts in .Net 8
I do have blank Blazor project in .Net 8 and i am trying to use ApexCharts via nuget apexcharts / Blazor-ApexCharts.
I have used the demo code in a page. There are no errors but the charts just does ...
1
vote
1
answer
48
views
Heatmap in React JS
I am using ApexCharts to integrate a heatmap. However, when the Y value is 0, the default color rgba(255, 255, 255, 1) is applied. I want to set a specific color for the value y = 0 to improve the ...
- 11
0
votes
0
answers
16
views
Customize the dot marker with tooltip on line chart (ApexCharts)
I'm trying to create a custom library of chart component with Apexcharts and Vue3Apexcharts. I would like to be able to customize this little dot (marker)
Here is what I would like to customize
I ...
0
votes
0
answers
9
views
React/Apex chart rendering a very small pie when a lot of series are present in mobile devices
I can't render the Pie Chart with React ApexCharts (need to stay on this one) in its full size when there are a lot of series without either the legend cannibalizing the pie space or having to render ...
- 1
0
votes
0
answers
16
views
Apex Charts (JS) remove first / last grid and first / last tick [closed]
im designing a chart in apex. It's my first try and looks really great.
But i hang at a few problems.
enter image description here
The black arrows mark the grid / ticks i which I would like to remove....
0
votes
1
answer
28
views
want to make custom toolbar work using apexcharts
I have added apexcharts in my next app. The chart is working fine. But the problem is I want to add custom toolbar like sidebar with charts. So I added the UI for it. But now I want to make the icons ...
- 53
-1
votes
0
answers
17
views
Apex Polar Chart Height Issue
I'm having a problem on fitting the ApexChart Polar chart height and width. (JS) In laptop screen its looks perfect fit, when the page viewed in bigger screen then it not repeating the parent ...
- 3
0
votes
0
answers
20
views
Configuring Apexcharter Treemap labels and colors
I am currently experimentating with treemap plots with apexcharter and I am trying to replicate some functionnalities that I used in my previous plots.
1 - I would like to display the y value (or the ...
- 47
0
votes
0
answers
29
views
Is there any way to save the state of an ApexChart chart into session storage and retrive it after page reload?
I'm using Angular 17 with ApexCharts. I would like to save the state of a chart (hidden series, zoom, active/inactive legends etc.) into the session storage, and retrieve it after page reload to show ...
- 23
1
vote
1
answer
54
views
ViteJS version 5 not working with Apexcharts
I'm currently working on a project using Ruby on Rails and React. I'm using Vite vite_rails and vite version 5.3.1. I'm trying to integrate some dynamic charts using Apexcharts examples from Flowbite.
...
- 2,989
1
vote
0
answers
59
views
How to set data labels in the center of bubbles in a bubble chart ApexCharts?
I'm working on a bubble chart using ApexCharts and I'm having trouble centering the data labels in the middle of each bubble. I've searched the documentation and found options to set the horizontal ...
- 11
0
votes
0
answers
24
views
ApexChart charts are not the same size?
I'm trying to create a statistics component in my project, and I've decided to use ApexCharts...Now, everything was going smoothly until I discovered that not all charts are the same size, for example,...
- 1
0
votes
0
answers
40
views
I'm having an data loss issue using line Graphs in ApexCharts
ApexCharts seems to modify/remove some data, I'm not quite sure if this is a skill issue of mine, or something else.
I'm getting data from an API from my server, the APIs data is intact and seems to ...
- 1
0
votes
0
answers
13
views
Blazor apexchart data not in correct categories
I'm having issues regarding the use of categories with apexchart. The data is always mapping to the wrong category.
I like to think I am missing something but I just can't seem to know what.
I'm ...
0
votes
0
answers
24
views
Sidebar unresponsive on hover when resizing multiple apexcharts charts
I have created a dashboard system using ApexCharts with a sidebar that is supposed to expand horizontally when hovered over. Initially, with only one chart, the sidebar animation worked as expected. ...
- 11
1
vote
1
answer
96
views
I would like to use apexcharts and ng-apexcharts in angular 18 with SSR
I would like to use apexcharts and ng-apexcharts in angular 18 with SSR , i have this problem:
window is not defined
at node_modules/apexcharts/dist/apexcharts.common.js (c:/Users/lakhm/Desktop/...
0
votes
1
answer
19
views
How can I Rotate DataLabel Text in ApexChart
How can I rotate datalabel text in ApexChart (Bar Chart)
I tried by adding rotate property in like this
dataLabels: {
enabled: true,
textAnchor: 'end',
style: {
fontSize: '13px',
...
- 124
1
vote
0
answers
25
views
ApexCharts React: All Charts Displaying Same Data After State Update
I am using ApexCharts with React in a Next.js project to create multiple area plot sparklines. When the statsData states changes, all charts should update with new data. However, all charts end up ...
- 67
1
vote
0
answers
51
views
ApexChart - Cannot read properties of null (reading 'length') randomly
I am creating an Apexchart using Angular that is supposed to populate a dataset dynamically. When there is 3 data sets for the series and label, it loads just fine. When I add 5+ it randomly starts ...
0
votes
0
answers
17
views
How to set the plot height in Apexcharts?
I'm using Apexcharts (with Vue) to create a Pie chart, but I can't set the height specifically for the pie/plot area.
The docs describe the options.chart.height property, but that is used to set the ...
- 1
0
votes
0
answers
33
views
ApexCharts: How to Ensure Data Labels Are Visible or Positioned Above Bars When Bars Are Too Small?
I'm using ApexCharts in my Java application to create bar charts. I'm facing an issue where the data labels are not visible when the bars are too small to accommodate them. I want to ensure that the ...
- 21
0
votes
1
answer
33
views
ApexCharts: y-axis label color not working (x-axis works fine)
I'm working with ApexCharts and I'm facing an issue where the y-axis label color isn't being applied. The x-axis color is working correctly, though.
Here's the relevant code snippet:
// Setting x-...
- 21
0
votes
0
answers
24
views
Apexcharts chart margins and other css issues
I am trying to get the Apexcharts working for my website. I have multiple charts of different types in one page, and I need to adjust for example margins of every chart individually, backgroundcolor, ...
- 1
0
votes
1
answer
32
views
Apexchart not show y-axis second when add tooltip into its javascript
Normally, I append data to second y-axis as an array is work perfectly, but somehow when I started to appending collection to data then it not show with 2 y-axis at once anymore.
I even try to add x, ...
- 31
0
votes
1
answer
33
views
Add spacing around datalabels in React Apexcharts library
I am using React Apexcharts library to plot the chart. I am having trouble adding space around the datalabels in a pie chart. Can anyone help in this?
const pieChartOptions = {
labels: ["...
1
vote
2
answers
25
views
Apex charts for vue js enable tooltip for legend series
In Apex pie charts I need to enable the default tooltip while hovering the legend how to do that.
chartOptions: {
chart: {
width: 380,
...
- 11
1
vote
1
answer
53
views
Apexcharts show datetime axis beyond series length
I have an apex chart of xaxis-type datetime. I have a data series with values between 16:30-17:05. However, I want to display the full current day as xaxis range (from 00:00-23:59) and the series ...
- 579
0
votes
0
answers
21
views
In Oracle APEX, 23.1 How do I change the colour based on the value of the label on the xaxis?
I want to be able to have different colour x-Axis labels (tickLabels?) based on the value of the Lable -- EXPIRED would be Red, "> 40 Days" would be Green, etc
Used the following ...
0
votes
0
answers
23
views
ApexChart Horizontal barchart Xaxis repetition Issue
I have set Custom Colors for 4 Ranges in Horizontal bar chart and values within each range have specific colors to distinguish, which are 4 Different Colors as Green Color, Yellow Color, Red Color and ...
- 49
0
votes
0
answers
36
views
Blazor ApexCharts DarkMode Tooltip and Toolbar not visible
Blazor ApexCharts Nuget Package in Dark Mode, Tooltip and Toolbar aren't visible.
ChartLightMode
ChartDarkMode
@page "/myApprovals"
<MudGrid>
<MudItem xs="12" sm=&...
- 49
0
votes
0
answers
16
views
Apex chart custom text on selection start and end points on line chart if brush:true
As I've integrated apex-chart in react project. I've added feature of drag and select section on graph on line chart, now I want to add selected min and max value at the boxes of selection box line as ...
- 797
0
votes
0
answers
16
views
React ApexCharts: Adding Emojis to Data Points with Goals
I am on React project using ApexCharts to display data, and I'm trying to add emojis to specific data points that have associated goals.
I have tried adding emojis using the markers ,annotations ...
0
votes
1
answer
38
views
Height problem when displaying a small Apexchart graph
So I am making a shiny app using apexcharter for the graphs, and I need to make very small histograms (about 40/60 pixels high) that would be contained in boxes with other key statistics. At first I ...
- 47
1
vote
1
answer
36
views
How prevent scatter point trimmed on mixed charts graph in apexcharts?
The last scatter point is cut and is correctly inside the svg container.
Here a codepen with demo https://codepen.io/xechino/pen/gOJbgRa
How can I make the stitch come out complete without cutting it ...
- 13
0
votes
0
answers
42
views
Angular 17 - Chart not updating when using apexchart to update scatter chart using an SSE that brings the data stream
I am using Angular 17, when ever the data stream is triggered from an SSE which is generally for every slipt second, I am updating my apex chart. I am using this for populating the real time data.
I ...
- 41
0
votes
1
answer
78
views
Apart Area Chart not showing Data if type Datetime is selected [closed]
I am tryng to display data using Apex Chart, the chart is working fine dynamically if its only DATE type. When I use date range search (switching to DATETIME dynamically) to query database the AREA ...
- 37
0
votes
0
answers
43
views
How to add Tooltip when hovering over the Total of an Apexcharts chart?
I am using ApexChart and would like to add a Tooltip when the user hovers the mouse over the Total. I have read the documentation and forums but have not been able to do it.
My code is as follows:
...
- 35
1
vote
0
answers
35
views
How to use different data to show shades in TreeMap Apexcharts?
Essentially series's construction like
series = [{
data: [...dataInput.FutureTradingRate.map((item) => {
return {
x: item.Name,
y: item.Value,
...
- 11
0
votes
0
answers
26
views
ApexCharts set global default colors with Vue3
How to set global default colors and/or theme palette for ApexCharts using Vue3 + Typescript ?
PS: I'm using quasar cli.
I've tried to set Apex.colors following documentation, but it's not working.
I'...
0
votes
0
answers
30
views
Mixed Chart Multiple yaxis with negative value behaviour Apexcharts
I am trying to make a mixed chart with 2 lines and 1 bar chart with multiple yaxis. I want the bar chart to have the negative value behavior starting from the middle using the second yaxis (0%). Still ...
- 2,383
0
votes
1
answer
108
views
ApexCharts Radar Chart have chart go to max data possible always
Seems with apex charts that the chart produced for radar its always to your data you have specified.
Does anyone know if its possible to have it go out to what the max value can be always instead of ...
- 201
0
votes
1
answer
28
views
How to Associate Series with Specific Y-Axis in ApexCharts While Retaining Custom Series Names?
I'm working with ApexCharts in a Vue.js application where I need to dynamically link series to specific y-axes based on the series name. However, I've encountered an issue where the series must be ...
- 82
0
votes
1
answer
41
views
How to change the style of radial bars
I would like to improve the visual aspect of my radial graphic. I am using fake data to simulate the arrival of data from the backend of 12 or more series/labels, my code is as follows:
const ...
- 35
0
votes
1
answer
19
views
Apexcharts displays undefined on dataLabels when it should be 0
I'm using apexchart in a cshtml page to make a combined bar and line chart. On the left bottom corner of the chart, I want it to be 0 but it displays "infinityundefined". How can I make it 0?...
- 23
0
votes
0
answers
20
views
Apexchart the file isn't available on site error
let chart;
document.addEventListener('dataLoaded', (data) => {
options.series[0].data = data.detail[0][1];
chart = new ApexCharts(document.getElementById("...
0
votes
0
answers
42
views
ApexCharts | Candlestick chart rendering issue on load in NextJS application
I have an issue where my candlestick chart (which is linked to a bar chart [intentionally]) does not render the candles on load. Can be seen below.
However, when I start to select on the volume bars ...
- 11
0
votes
0
answers
67
views
Apex Charts on Mudblazor .Net6
This is ApexChart Razor Page which is not showing any chart displays blank page. I want to implement ApexChart on MudBlazor .Net6
@page "/apexChart"
@using MudBlazor
@using MudBlazor.Charts
...
- 49
1
vote
0
answers
31
views
Apexcharter dataLabels not displaying properly with add_line
While attempting to make a column/line graph with apexcharter, I noticed that the dataLabels reacted weirdly to the add_line function. Here is a reproducible exemple :
library(dplyr)
library(tidyr)
...
- 47