Open Hongmebuilding opened 1 month ago
At this time it doesn't seem possible but it would be a worthwhile addition. I had a quick look and it didn't appear to be trivial.
There is a way to simulate it using stacked column series, but it may be messier than you want under the hood. Here's the chart followed by the HTML.
You can see how it works from the HTML but a few things that Apexcharts is doing for it to work:
yaxis.seriesName
as an array to associate the two split blood pressure series' with the same yaxis. I could have given both series the same series.group
name explicitly but Apexcharts will automatically group together series of the same type on the same yaxis if they don't have a series.group
defined.chart.stacked: true
it will only stack series that are members of the same group, that is, just the two blood pressure column series'.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Combo Chart with rangeBar simulated with stacked columns</title>
<link href="apexcharts.js/samples/assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 1000px;
margin: 35px auto;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
const bloodPressure = [
{ x: '1', y: [80, 120] },
{ x: '2', y: [85, 130] },
{ x: '3', y: [75, 115] },
{ x: '4', y: [78, 118] },
{ x: '5', y: [82, 125] },
{ x: '6', y: [80, 122] },
{ x: '7', y: [85, 128] },
{ x: '8', y: [76, 116] },
{ x: '9', y: [80, 120] },
{ x: '10', y: [82, 124] },
{ x: '11', y: [85, 130] },
];
const bpLower = bloodPressure.map(el => el.y[0]);
const bpUpperToLower = bloodPressure.map(el => el.y[1]-el.y[0]);
const options={
series: [
{
name: 'μ°μν¬νλ',
type: 'bar',
data: [73.1, 81.5, 65, 88, 60.3, 90, 79.1, 80, 90, 75, 80],
},
{
name: 'νμ_Lower',
type: 'bar',
data: bpLower
},
{
name: 'νμ',
type: 'bar',
data: bpUpperToLower
},
{
name: 'μ¬λ°μ',
type: 'line',
data: [51.1, 61.5, 40, 35, 46.3, 41, 65.1, 38, 46, 37, 50],
},
{
name: '체μ¨',
type: 'line',
data: [50, 60, 65, 70, 80, 60, 70, 30, 61, 45, 33],
},
{
name: 'νλλ',
type: 'line',
data: [43.1, 51.5, 45, 45, 40.3, 45, 41.1, 46, 50, 55, 40],
},
{
name: 'λ°°ν°λ¦¬',
type: 'line',
data: [100, 95.5, 90, 84, 80.3, 75, 70.1, 65, 60, 53, 47],
},
],
chart: {
type: 'line',
stacked: true,
},
grid: {
yaxis: {
lines: {
show: false,
},
},
},
colors: [
'#53C9FA',
'rgba(0,0,0,0)',
'#FF59C2',
'#FF8A3C',
'#EF5151',
'#A354D8',
'#78D153',
],
stroke: {
width: [0, 0, 3, 3, 3, 3, 3],
curve: 'smooth',
},
plotOptions: {
bar: {
borderRadius: 5,
borderRadiusWhenStacked: 5
},
},
xaxis: {
type: 'category',
},
yaxis: [
{
seriesName: 'μ°μν¬νλ',
title: {
text: 'μ°μν¬νλ (%)',
},
},
{
seriesName: ['νμ_Lower', 'νμ'],
title: {
text: 'νμ (mmHg)',
},
min: 60,
max: 160, // To keep a range of 100 for nice axis labels.
},
{
seriesName: 'μ¬λ°μ',
title: {
text: 'μ¬λ°μ (bpm)',
},
},
{
seriesName: '체μ¨',
title: {
text: 'μ²΄μ¨ (Β°C)',
},
},
{
seriesName: 'νλλ',
title: {
text: 'νλλ',
},
},
{
seriesName: 'λ°°ν°λ¦¬',
title: {
text: 'λ°°ν°λ¦¬ (%)',
},
min: 0,
max: 100,
},
],
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function (y, o) {
if (typeof y !== "undefined") {
if (o.seriesIndex === 2) {
var bpu = o.series[o.seriesIndex][o.dataPointIndex];
var bpl = o.series[o.seriesIndex-1][o.dataPointIndex];
bpu = bpu + bpl;
return bpu.toFixed(0) + " units";
}
return y.toFixed(0) + " units";
}
return y;
}
}
},
legend: {
horizontalAlign: 'left',
offsetX: 40,
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>
</html>
Although there is no feature about it, there's a way to overcome it! Thank you for your help
Summary
i want to know whether it is possible to put range chart in mixed chart. it would be very nice put together
API Changes
Intended Use Case
synthesis graph in health care service