Group/Sync Graphs but different height

dlopesa commented 2 months ago

Summary

I need two graphs to share zooms and tooltip like the sync but having different heights. Is there away? could it be addes?

Intended Use Case

For example

rosco54 commented 2 months ago

Edit: Sorry, it looks like you've seen these. You can set the height of the charts independently via the usual chart.height option.

Take a look at: https://apexcharts.com/docs/chart-types/synchronized-charts/ and the example here: https://apexcharts.com/javascript-chart-demos/line-charts/syncing-charts/

dlopesa commented 2 months ago

I tried using those but onced they are grouped by the height is always the same, even if I try to make them diferent, it will assume only on of them

rosco54 commented 2 months ago

Are you (or some wrapper) setting the height globally in window.Apex and it's overriding perhaps?

Here's one of the examples from those pages where I gave the two charts different chart.height values.

line-1

Here's the HTML file:

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-10">
        <div id="chart-line"></div>
        <div id="chart-area"></div>
      </div>
    </div>
  </div>

  <script>

 var optionsLine = {
  series: [{
    data: [[0, 23], [1, 24], [2, 15], [3, 25]]
  }],
  colors: ['#00E396'],
  chart: {
    id: 'line-1',
    group: 'social',
    type: 'line',
    height: 250
  },
  yaxis: {
    labels: {
      minWidth: 40
    }
  }
};
var chart = new ApexCharts(document.querySelector("#chart-line"), optionsLine)
chart.render()

var optionsArea = {
  series: [{
    data: [[0, 23], [1, 24], [2, 15], [3, 25]]
  }],
  colors: ['#008FFB'],
  chart: {
    id: 'area-1',
    group: 'social',
    type: 'area',
    height: 150
  },
  yaxis: {
    labels: {
      minWidth: 40
    }
  }
};
var chart = new ApexCharts(document.querySelector("#chart-area"), optionsArea)
chart.render()

  </script>

</body>

</html>

github-actions[bot] commented 3 days ago

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.

apexcharts / apexcharts.js

Group/Sync Graphs but different height #4451

Summary

Intended Use Case