Skip to content

Commit 1993ad3

Browse files
junedchhipajunedchhipa
committed
feat(yaxis): add alignZero to share zero baseline across multiple y-axes
When multiple y-axes mix sign ranges (e.g. one axis spans -10..15, another 0..3), their 0 lines no longer share a pixel position so bars from different axes appear to have different baselines. Setting alignZero: true on two or more axes now extends each opted-in axis so y=0 lands at the same pixel. Logarithmic and user-locked min/max axes are excluded. Default is false; Closes #5100
1 parent a5d3a49 commit 1993ad3

8 files changed

Lines changed: 658 additions & 10 deletions

File tree

‎samples/react/mixed/multiple-yaxes-aligned-zero.html‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Multiple Y Axis Aligned at Zero</title>
8+
9+
<link href="../../assets/styles.css" rel="stylesheet" />
10+
11+
<style>
12+
13+
#chart {
14+
max-width: 650px;
15+
margin: 35px auto;
16+
}
17+
18+
</style>
19+
20+
21+
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
22+
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
23+
<script src="https://cdn.jsdelivr.net/npm/prop-types@15.8.1/prop-types.min.js"></script>
24+
<script src="https://cdn.jsdelivr.net/npm/babel-core@5.8.34/browser.min.js"></script>
25+
<script src="../../../dist/apexcharts.js"></script>
26+
<script src="https://cdn.jsdelivr.net/npm/react-apexcharts@1.7.0/dist/react-apexcharts.iife.min.js"></script>
27+
28+
29+
<script>
30+
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
31+
// Based on https://gist.github.com/blixt/f17b47c62508be59987b
32+
var _seed = 42
33+
Math.random = function () {
34+
_seed = (_seed * 16807) % 2147483647
35+
return (_seed - 1) / 2147483646
36+
}
37+
</script>
38+
39+
40+
</head>
41+
42+
<body>
43+
44+
<div id="app"></div>
45+
46+
<div id="html">&lt;div id=&quot;chart&quot;&gt;
47+
&lt;ReactApexChart options={state.options} series={state.series} type=&quot;line&quot; height={350} /&gt;
48+
&lt;/div&gt;</div>
49+
50+
<script type="text/babel">
51+
const ApexChart = () => {
52+
const [state, setState] = React.useState({
53+
54+
series: [{
55+
name: 'Profit',
56+
type: 'column',
57+
data: [5, 12, -8, 14, -3, 9, -2, 6]
58+
}, {
59+
name: 'Units Sold',
60+
type: 'column',
61+
data: [1.2, 2.1, 1.8, 2.7, 2.0, 2.4, 1.9, 2.6]
62+
}, {
63+
name: 'Index',
64+
type: 'line',
65+
data: [25, 27, 26, 29, 28, 29, 30, 30]
66+
}],
67+
options: {
68+
chart: {
69+
height: 350,
70+
type: 'line',
71+
stacked: false
72+
},
73+
stroke: {
74+
width: [0, 0, 4]
75+
},
76+
title: {
77+
text: 'Multiple Y-Axes With Aligned Zero',
78+
align: 'left'
79+
},
80+
xaxis: {
81+
categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8'],
82+
},
83+
yaxis: [
84+
{
85+
seriesName: 'Profit',
86+
alignZero: true,
87+
axisTicks: { show: true },
88+
axisBorder: { show: true, color: '#008FFB' },
89+
labels: { style: { colors: '#008FFB' } },
90+
title: { text: 'Profit (mixed +/-)', style: { color: '#008FFB' } }
91+
},
92+
{
93+
seriesName: 'Units Sold',
94+
alignZero: true,
95+
opposite: true,
96+
axisTicks: { show: true },
97+
axisBorder: { show: true, color: '#00E396' },
98+
labels: { style: { colors: '#00E396' } },
99+
title: { text: 'Units (positive only)', style: { color: '#00E396' } }
100+
},
101+
{
102+
seriesName: 'Index',
103+
alignZero: true,
104+
opposite: true,
105+
axisTicks: { show: true },
106+
axisBorder: { show: true, color: '#FEB019' },
107+
labels: { style: { colors: '#FEB019' } },
108+
title: { text: 'Index', style: { color: '#FEB019' } }
109+
}
110+
],
111+
tooltip: { shared: true, intersect: false },
112+
legend: { horizontalAlign: 'left' }
113+
},
114+
115+
116+
});
117+
118+
119+
120+
return (
121+
<div>
122+
<div id="chart">
123+
<ReactApexChart options={state.options} series={state.series} type="line" height={350} />
124+
</div>
125+
<div id="html-dist"></div>
126+
</div>
127+
);
128+
}
129+
130+
const domContainer = document.querySelector('#app');
131+
ReactDOM.render(<ApexChart />, domContainer);
132+
</script>
133+
134+
135+
</body>
136+
</html>

‎samples/source/mixed/multiple-yaxes-aligned-zero.xml‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<title>Multiple Y Axis Aligned at Zero</title>
2+
3+
<style>
4+
#chart {
5+
max-width: 650px;
6+
margin: 35px auto;
7+
}
8+
</style>
9+
10+
<chart>
11+
<options>
12+
chart: {
13+
height: 350,
14+
type: 'line',
15+
stacked: false
16+
},
17+
stroke: {
18+
width: [0, 0, 4]
19+
},
20+
title: {
21+
text: 'Multiple Y-Axes With Aligned Zero',
22+
align: 'left'
23+
},
24+
xaxis: {
25+
categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8'],
26+
},
27+
yaxis: [
28+
{
29+
seriesName: 'Profit',
30+
alignZero: true,
31+
axisTicks: { show: true },
32+
axisBorder: { show: true, color: '#008FFB' },
33+
labels: { style: { colors: '#008FFB' } },
34+
title: { text: 'Profit (mixed +/-)', style: { color: '#008FFB' } }
35+
},
36+
{
37+
seriesName: 'Units Sold',
38+
alignZero: true,
39+
opposite: true,
40+
axisTicks: { show: true },
41+
axisBorder: { show: true, color: '#00E396' },
42+
labels: { style: { colors: '#00E396' } },
43+
title: { text: 'Units (positive only)', style: { color: '#00E396' } }
44+
},
45+
{
46+
seriesName: 'Index',
47+
alignZero: true,
48+
opposite: true,
49+
axisTicks: { show: true },
50+
axisBorder: { show: true, color: '#FEB019' },
51+
labels: { style: { colors: '#FEB019' } },
52+
title: { text: 'Index', style: { color: '#FEB019' } }
53+
}
54+
],
55+
tooltip: { shared: true, intersect: false },
56+
legend: { horizontalAlign: 'left' }
57+
</options>
58+
59+
<series>
60+
[{
61+
name: 'Profit',
62+
type: 'column',
63+
data: [5, 12, -8, 14, -3, 9, -2, 6]
64+
}, {
65+
name: 'Units Sold',
66+
type: 'column',
67+
data: [1.2, 2.1, 1.8, 2.7, 2.0, 2.4, 1.9, 2.6]
68+
}, {
69+
name: 'Index',
70+
type: 'line',
71+
data: [25, 27, 26, 29, 28, 29, 30, 30]
72+
}]
73+
</series>
74+
</chart>

‎samples/vanilla-js/mixed/multiple-yaxes-aligned-zero.html‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Multiple Y Axis Aligned at Zero</title>
8+
9+
<link href="../../assets/styles.css" rel="stylesheet" />
10+
11+
<style>
12+
13+
#chart {
14+
max-width: 650px;
15+
margin: 35px auto;
16+
}
17+
18+
</style>
19+
20+
21+
<script src="../../../dist/apexcharts.js"></script>
22+
23+
24+
<script>
25+
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
26+
// Based on https://gist.github.com/blixt/f17b47c62508be59987b
27+
var _seed = 42
28+
Math.random = function () {
29+
_seed = (_seed * 16807) % 2147483647
30+
return (_seed - 1) / 2147483646
31+
}
32+
</script>
33+
34+
35+
</head>
36+
37+
<body>
38+
<div id="chart"></div>
39+
40+
<script>
41+
42+
var options = {
43+
series: [{
44+
name: 'Profit',
45+
type: 'column',
46+
data: [5, 12, -8, 14, -3, 9, -2, 6]
47+
}, {
48+
name: 'Units Sold',
49+
type: 'column',
50+
data: [1.2, 2.1, 1.8, 2.7, 2.0, 2.4, 1.9, 2.6]
51+
}, {
52+
name: 'Index',
53+
type: 'line',
54+
data: [25, 27, 26, 29, 28, 29, 30, 30]
55+
}],
56+
chart: {
57+
height: 350,
58+
type: 'line',
59+
stacked: false
60+
},
61+
stroke: {
62+
width: [0, 0, 4]
63+
},
64+
title: {
65+
text: 'Multiple Y-Axes With Aligned Zero',
66+
align: 'left'
67+
},
68+
xaxis: {
69+
categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8'],
70+
},
71+
yaxis: [
72+
{
73+
seriesName: 'Profit',
74+
alignZero: true,
75+
axisTicks: { show: true },
76+
axisBorder: { show: true, color: '#008FFB' },
77+
labels: { style: { colors: '#008FFB' } },
78+
title: { text: 'Profit (mixed +/-)', style: { color: '#008FFB' } }
79+
},
80+
{
81+
seriesName: 'Units Sold',
82+
alignZero: true,
83+
opposite: true,
84+
axisTicks: { show: true },
85+
axisBorder: { show: true, color: '#00E396' },
86+
labels: { style: { colors: '#00E396' } },
87+
title: { text: 'Units (positive only)', style: { color: '#00E396' } }
88+
},
89+
{
90+
seriesName: 'Index',
91+
alignZero: true,
92+
opposite: true,
93+
axisTicks: { show: true },
94+
axisBorder: { show: true, color: '#FEB019' },
95+
labels: { style: { colors: '#FEB019' } },
96+
title: { text: 'Index', style: { color: '#FEB019' } }
97+
}
98+
],
99+
tooltip: { shared: true, intersect: false },
100+
legend: { horizontalAlign: 'left' }
101+
};
102+
103+
var chart = new ApexCharts(document.querySelector("#chart"), options);
104+
chart.render();
105+
106+
107+
</script>
108+
109+
110+
</body>
111+
</html>

0 commit comments

Comments
 (0)