Comments (22)
any update? got the same problem
from apexcharts.js.
@junedchhipa updates?
from apexcharts.js.
Checking in also. Any update or workaround for this? Love the library BTW
from apexcharts.js.
+1 we have the same issue...
from apexcharts.js.
Just recently implemented this. Example below.
const series = [
{
data: [4,5,6],
name: "Complete",
type: "column"
},
{
data: [1,2,3],
name: "Pending",
type: "column"
},
{
data: [10, 50, 90],
name: "Percentage",
type: "line"
}
];
const options = {
chart: {
background: "#222",
height: 400,
redrawOnParentResize: true,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
},
type: "line"
},
colors: ["red", "blue", "green"],
dataLabels: {
enabled: true,
enabledOnSeries: [2]
},
noData: {
align: "center",
text: "No data available at the moment",
verticalAlign: "middle"
},
plotOptions: {
bar: {
borderRadius: 8,
horizontal: false
}
},
stroke: {
width: [0, 0, 4]
},
title: {
text: "Completion Count and Percentage"
},
theme: {
mode: "dark"
},
xaxis: {
categories: ["Label 1", "Label 2", "Label 3"],
type: "category"
},
yaxis: [
{
title: {
text: "Counts"
}
},
{
max: 100,
min: 0,
opposite: true,
title: {
text: "(%) Complete"
}
}
]
};
return (<Chart options={options} series={series} type="bar" width="100%" />);
from apexcharts.js.
Hi @RyanMooreOPS
Currently, in mixed charts - stacked bars is not supported along with lines even though there is just 1 y-axis.
I have intentionally disabled the stacking in mixed-charts as there are a lot of other things to take care when dealing with this kind of chart.
I will surely give this an attempt in the future though.
Thank you
from apexcharts.js.
Please open a new ticket for a new feature request as the original issue is resolved.
There is still a bug related to how scales are computed when a stacked chart is combined with a line chart ( See also #531 ). The values for the line chart series are included when computing the stack scale, leaving empty space in either direction.
This could be solved by making stacked option support an array of values, similar to how stroke properties are handled.
from apexcharts.js.
I tried implementing it with vue-apexcharts but it doesn't seem to be working yet, the numbers appear on the chart but there are no lines. But maybe I'm doing something wrong.
<vue-apexchart type="bar" width="100%" :options="chartOptions" :series="series"></vue-apexchart>
return {
modaleBc: false,
height: null,
series: [
{
data: [4,5,6],
name: "Complete",
type: "column"
},
{
data: [1,2,3],
name: "Pending",
type: "column"
},
{
data: [10, 50, 90],
name: "Percentage",
type: "line"
}
],
chartOptions: {
chart: {
background: "#ffffff",
height: 400,
redrawOnParentResize: true,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
},
type: "line"
},
colors: ["red", "blue", "green"],
dataLabels: {
enabled: true,
enabledOnSeries: [2]
},
noData: {
align: "center",
text: "No data available at the moment",
verticalAlign: "middle"
},
plotOptions: {
bar: {
borderRadius: 8,
horizontal: false
}
},
stroke: {
width: [0, 0, 4]
},
title: {
text: "Completion Count and Percentage"
},
theme: {
mode: "dark"
},
xaxis: {
categories: ["Label 1", "Label 2", "Label 3"],
type: "category"
},
yaxis: [
{
title: {
text: "Counts"
}
},
{
max: 100,
min: 0,
opposite: true,
title: {
text: "(%) Complete"
}
}
]
}
}
}
from apexcharts.js.
Re-opening this.
The functionality will be released in v2.2.3
from apexcharts.js.
Hello, is there an example of how to set up a stacked (100%) bar chart with a line chart?
from apexcharts.js.
100% Stacked line/area chart is not supported yet.
from apexcharts.js.
Do you have any idea when it will be supported?
from apexcharts.js.
I am looking for this fonctionnality aswell... thanks to say when it will be released :D
from apexcharts.js.
Please open a new ticket for a new feature request as the original issue is resolved.
from apexcharts.js.
Do you mean 100% Stacked line/area chart is now supported ?
from apexcharts.js.
No, the original issue is about stacked bar chart with a line chart.
100% stacked line/area chart is not supported yet.
from apexcharts.js.
Is 100% stacked columns / line supported ? If not i will open a ticket ! thanks for the fast anwser
from apexcharts.js.
Needed this just now @adam-kramer. Works beautifully, thank you so much for this! ❤️
What's the best way to donate towards the project?
from apexcharts.js.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
from apexcharts.js.
hi @junedchhipa !
please checkout below chart . some grid lines are not fitted on chart series.
I saw this bug only in horizontal stacked bar chart.
any suggestion?
/////////////
//////////////
@import url(https://fonts.googleapis.com/css?family=Roboto);
body {
font-family: Roboto, sans-serif;
}
#chart {
max-width: 650px;
margin: 35px auto;
}
///////////////////////////
var options = {
grid: {
show: true,
borderColor: '#90A4AE',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: true
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 2000
}
},
row: {
colors: undefined,
opacity: 0.5
},
column: {
colors: undefined,
opacity: 0.5
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
}
,
series: [{
name: 'Marine Sprite',
data: [40, 20, 41, 37, 22, 43, 21]
}, {
name: 'Striking Calf',
data: [40, 20, 33, 52, 13, 43, 32]
}, {
name: 'Tank Picture',
data: [40, 20, 11, 9, 15, 11, 20]
}, {
name: 'Bucket Slope',
data: [9, 20, 5, 8, 6, 9, 4]
}, {
name: 'Reborn Kid',
data: [25, 20, 19, 32, 25, 24, 10]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: 'Fiction Books Sales'
},
xaxis: {
position:'top',
tickAmount:10,
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
labels: {
formatter: function (val) {
return val + "K"
}
}
},
yaxis: {
title: {
text: undefined
},
},
tooltip: {
y: {
formatter: function (val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetX: 40
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
from apexcharts.js.
@adam-kramer There is no "column" series type
from apexcharts.js.
i used Chart.js with react-chartjs-2
pls install "react-chartjs-2": "^5.2.0", and "chart.js": "^4.3.0",
My Code :
import React from 'react';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';
import { format } from 'date-fns';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
const options = {
animation: {
duration: 0
},
plugins: {
title: {
display: false,
},
legend: {
display: true,
position: "bottom",
}
},
maintainAspectRatio: false ,
scales: {
A: {
type: 'linear',
display: true,
position: 'left',
suggestedMin:0,
},
B: {
type: 'linear',
display: true,
position: 'right',
min:0,
grid: {
drawOnChartArea: false,
},
},
},
};
const getFormattedDateArr = (arr) => {
const data = arr
.map(dated=> format(new Date(dated), 'dd LLL'))
.map(dated=> dated ? String(dated).toUpperCase() : dated);
return data;
}
export default function StackedBarLine({ data }) {
//console.log('StackedBarLine', data);
const dataaaaaa = {
labels: data?.dates?.length > 0 ? getFormattedDateArr(data?.dates) : [],
datasets: [
{
label: 'Negative',
data: data?.neg_sent?.length > 0 ? data?.neg_sent.map(val => Number(val.value)) : [],
borderColor: 'rgb(255, 0, 0)',
backgroundColor: 'rgb(255, 0, 0, 0.5)',
stack: 'combined',
type: 'bar',
yAxisID: 'A',
},
{
label: 'Neutral',
data: data?.neu_sent?.length > 0 ? data?.neu_sent.map(val => Number(val.value)) : [],
borderColor: 'rgb(255, 165, 0)',
backgroundColor: 'rgb(255, 165, 0, 0.5)',
stack: 'combined',
type: 'bar',
yAxisID: 'A',
},
{
label: 'Positive',
data: data?.pos_sent?.length > 0 ? data?.pos_sent.map(val => Number(val.value)) : [],
borderColor: 'rgb(50, 205, 50)',
backgroundColor: 'rgb(50, 205, 50, 0.5)',
stack: 'combined',
type: 'bar',
yAxisID: 'A',
},
{
label: 'Volume',
data: data?.news?.length > 0 ? data?.news.map(val => Number(val.value)) : [],
borderColor: 'rgb(46, 147, 250)',
backgroundColor: 'rgb(46, 147, 250, 0.5)',
stack: 'combined',
yAxisID: 'B',
}
]
};
return <>
</>
;
}
from apexcharts.js.
Related Issues (20)
- Problem with overlapping labels on YAxis with LineChart HOT 1
- Horizontal range bar sparkline charts have extra padding since v3.40.0
- timeline chart - panning causes zoom level change HOT 4
- In bar charts, the alwaysDrawDataLabel option is always true.
- Version 3.46.0 causes Area Chart Gradient to "Glitch" when Hiding / Showing Data Series HOT 2
- Sync timeline and line chart
- Graphs bugging out in Apex charts HOT 1
- Treemap chart is not showing data properly in Angular. HOT 1
- Wish to have yaxis 0 tick always showing, but forceNiceScale does not seem to work properly with min/max values -1 < value < 1 HOT 4
- Certain stacked bar doesn't stack but overlaid on another series HOT 1
- Add SSR Support
- Grid lines overlaps floating legend HOT 1
- seriesIndex and dataPointIndex set to -1 if tooltips disabled HOT 2
- Grid lines overlapping legends
- Upgrade to 3.46.0 leads to not taking into account tickAmount in xaxis HOT 1
- Deselecting all series in a rangeArea graph results in an error
- Event for toolbar zoomin and zoomout
- X-Axis type says that the library doesn't support functions for dynamically calculating min and max HOT 1
- Apply border radius for stacked bar chart only for last and first items
- Make the Annotation to the background of the series
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from apexcharts.js.