Skip to content

Commit 8ad7643

Browse files
rosco54rosco54
committed
Implement feature request apexcharts#4237: see new sample:
area/multi-axis-with-seriesname-arrays.xml - also use this facility to simplify the specification of series inclusion in stacked charts, especially when combined with other series. See stacked-column-with-line.xml and c.f. stacked-column-with-line-new.xml The new facility should be backward compatible with the existing style (both described below to the best of my knowledge), via code that converts the old data structure to the new one. The current style of mapping multiple series to a y axis is to include one yaxis config per series but set each yaxis seriesName to the same series name and then set show: false on all axes that are not required. While not the purpose of apexcharts#4237, it offers a more intuitive alternative that explicitly configures yaxis elements with the series that will be referenced to them (seriesName: []). This only requires including the yaxis elements that will be seen on the chart. Old way: yax: ser 0: 0 1: 1 2: 1 3: 1 4: 1 Axes 0..4 are all scaled and all will be rendered unless the axes are show: false. If the chart is stacked, it's assumed that series 1..4 are the contributing series. New way: yax: ser 0: [0] 1: [1,2,3,4] If the chart is stacked (a global chart setting), it must be assumed that any axis with multiple series is stacked, presumably as separate sets (not yet implemented). Fix stacked chart y axis scaling: min and max were computed as the sum of the series min and max, not the min and max od the summed datapoints in each series. Note: it is left to the creativity of the user to visually disambiguate which plot is associated with which Y axis. Additional checks for undefined elements in CoreUtils.extendArrayProps(). Remove the duplicate outlier in boxplot-scatter.xml.
1 parent 80eba01 commit 8ad7643

File tree

136 files changed

+2428
-192
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

136 files changed

+2428
-192
lines changed

‎samples/react/area/multi-axis-with-seriesname-arrays.html

+227
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
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>Multi-YAxis-with-seriesName-arrays</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+
<script>
21+
window.Promise ||
22+
document.write(
23+
'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
24+
)
25+
window.Promise ||
26+
document.write(
27+
'<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
28+
)
29+
window.Promise ||
30+
document.write(
31+
'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
32+
)
33+
</script>
34+
35+
36+
<script src="https://cdn.jsdelivr.net/npm/react@16.12/umd/react.production.min.js"></script>
37+
<script src="https://cdn.jsdelivr.net/npm/react-dom@16.12/umd/react-dom.production.min.js"></script>
38+
<script src="https://cdn.jsdelivr.net/npm/prop-types@15.7.2/prop-types.min.js"></script>
39+
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
40+
<script src="../../../dist/apexcharts.js"></script>
41+
<script src="https://cdn.jsdelivr.net/npm/react-apexcharts@1.3.6/dist/react-apexcharts.iife.min.js"></script>
42+
43+
44+
<script>
45+
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
46+
// Based on https://gist.github.com/blixt/f17b47c62508be59987b
47+
var _seed = 42;
48+
Math.random = function() {
49+
_seed = _seed * 16807 % 2147483647;
50+
return (_seed - 1) / 2147483646;
51+
};
52+
</script>
53+
54+
<script>
55+
var generateDayWiseTimeSeries = function (baseval, count, yrange) {
56+
var i = 0;
57+
var series = [];
58+
while (i < count) {
59+
var x = baseval;
60+
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
61+
62+
series.push([x, y]);
63+
baseval += 86400000;
64+
i++;
65+
}
66+
return series;
67+
};
68+
69+
var data1 = generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
70+
min: 5,
71+
max: 20
72+
});
73+
74+
var data2 = generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
75+
min: 10,
76+
max: 20
77+
});
78+
79+
var data3 = generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
80+
min: 5,
81+
max: 25
82+
});
83+
84+
var data4 = generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
85+
min: 10,
86+
max: 35
87+
});
88+
</script>
89+
</head>
90+
91+
<body>
92+
93+
<div id="app"></div>
94+
95+
<div id="html">
96+
&lt;div id=&quot;chart&quot;&gt;
97+
&lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;area&quot; height={350} /&gt;
98+
&lt;/div&gt;
99+
</div>
100+
101+
<script type="text/babel">
102+
class ApexChart extends React.Component {
103+
constructor(props) {
104+
super(props);
105+
106+
this.state = {
107+
108+
series: [{
109+
name: 'Broccoli',
110+
data: data1
111+
},
112+
{
113+
name: 'Spinach',
114+
data: data2
115+
},
116+
{
117+
name: 'Apples',
118+
data: data3
119+
},
120+
{
121+
name: 'Plums',
122+
data: data4
123+
}],
124+
options: {
125+
chart: {
126+
type: 'area',
127+
height: 350,
128+
stacked: false
129+
},
130+
colors: ['#00EE00', '#008800', '#FF0000', '#AA00FF'],
131+
dataLabels: {
132+
enabled: false
133+
},
134+
stroke: {
135+
curve: 'monotoneCubic',
136+
width: [4, 4, 2, 2],
137+
dashArray: [0, 0, 2, 2]
138+
},
139+
legend: {
140+
position: 'top',
141+
horizontalAlign: 'left'
142+
},
143+
yaxis: [
144+
{
145+
seriesName: ['Broccoli', 'Spinach'],
146+
axisTicks: {
147+
show: true,
148+
color: '#008800'
149+
},
150+
axisBorder: {
151+
show: true,
152+
color: '#008800'
153+
},
154+
labels: {
155+
style: {
156+
colors: '#008800',
157+
},
158+
formatter: (val) => {
159+
let ref = val.toFixed(0);
160+
return val == ref ? val : ''
161+
}
162+
},
163+
title: {
164+
text: "Vegetables",
165+
style: {
166+
color: '#008800'
167+
}
168+
},
169+
},
170+
{
171+
seriesName: ['Plums','Apples'],
172+
opposite: true,
173+
axisTicks: {
174+
show: true,
175+
color: '#FF0000'
176+
},
177+
axisBorder: {
178+
show: true,
179+
color: '#FF0000'
180+
},
181+
labels: {
182+
style: {
183+
colors: '#FF0000',
184+
},
185+
formatter: (val) => {
186+
let ref = val.toFixed(0);
187+
return val == ref ? val : ''
188+
}
189+
},
190+
title: {
191+
text: "Fruit",
192+
style: {
193+
color: '#FF0000'
194+
}
195+
},
196+
}
197+
],
198+
xaxis: {
199+
type: 'datetime'
200+
}
201+
},
202+
203+
204+
};
205+
}
206+
207+
208+
209+
render() {
210+
return (
211+
<div>
212+
<div id="chart">
213+
<ReactApexChart options={this.state.options} series={this.state.series} type="area" height={350} />
214+
</div>
215+
<div id="html-dist"></div>
216+
</div>
217+
);
218+
}
219+
}
220+
221+
const domContainer = document.querySelector('#app');
222+
ReactDOM.render(React.createElement(ApexChart), domContainer);
223+
</script>
224+
225+
226+
</body>
227+
</html>

‎samples/react/boxPlot/boxplot-scatter.html

-4
Original file line numberDiff line numberDiff line change
@@ -118,10 +118,6 @@
118118
x: new Date('2020-01-01').getTime(),
119119
y: 27
120120
},
121-
{
122-
x: new Date('2020-01-01').getTime(),
123-
y: 78
124-
},
125121
{
126122
x: new Date('2021-01-01').getTime(),
127123
y: 15

0 commit comments

Comments
 (0)