range chart in mixed chart

[Hongmebuilding]

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

import ApexChart from 'react-apexcharts';

export default function MixChart() {
  return (
    <ApexChart
      height={500}
      series={[
        {
          name: 'oxygen',
          type: 'bar',
          data: [73.1, 81.5, 65, 88, 60.3, 90, 79.1, 80, 90, 75, 80],
        },
        {
          name: 'bloodpressure',
          type: 'rangeBar',
          data: [
            { 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] },
          ],
        },
        {
          name: 'pulse',
          type: 'line',
          data: [51.1, 61.5, 40, 35, 46.3, 41, 65.1, 38, 46, 37, 50],
        },
        {
          name: 'temperature',
          type: 'line',
          data: [50, 60, 65, 70, 80, 60, 70, 30, 61, 45, 33],
        },
        {
          name: 'walk',
          type: 'line',
          data: [43.1, 51.5, 45, 45, 40.3, 45, 41.1, 46, 50, 55, 40],
        },
        {
          name: 'battery',
          type: 'line',
          data: [100, 95.5, 90, 84, 80.3, 75, 70.1, 65, 60, 53, 47],
        },
      ]}
      options={{
        chart: {
          type: 'line',
          stacked: false,
        },
        grid: {
          yaxis: {
            lines: {
              show: false,
            },
          },
        },
        colors: [
          '#53C9FA',
          '#FF59C2',
          '#FF8A3C',
          '#EF5151',
          '#A354D8',
          '#78D153',
        ],
        stroke: {
          width: [0, 3, 3, 3, 3, 3],
          curve: 'smooth',
        },
        plotOptions: {
          bar: {
            columnWidth: '15px',
            borderRadius: 5,
          },
        },
        xaxis: {
          type: 'category',
        },
        yaxis: [
          {
            seriesName: '산소포화도',
            title: {
              text: '산소포화도 (%)',
            },
          },
          {
            seriesName: '혈압',
            title: {
              text: '혈압 (mmHg)',
            },
            min: 60,
            max: 140,
          },
          {
            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) {
              if (typeof y !== "undefined") {
                return y.toFixed(0) + " units";
              }
              return y;
            }
          }
        },
        legend: {
          horizontalAlign: 'left',
          offsetX: 40
        }
      }}
    />
  );
}

Intended Use Case

synthesis graph in health care service

[rosco54]

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:

1. I've used 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.
2. In setting chart.stacked: true it will only stack series that are members of the same group, that is, just the two blood pressure column series'.
3. The lower column in the stack was made transparent.

<!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>

[Hongmebuilding]

Although there is no feature about it, there's a way to overcome it! Thank you for your help

[github-actions[bot]]

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.

[github-actions[bot]]

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.