Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Group/Sync Graphs but different height #4451

Open
dlopesa opened this issue May 3, 2024 · 3 comments
Open

Group/Sync Graphs but different height #4451

dlopesa opened this issue May 3, 2024 · 3 comments
Labels
feature-request New feature or request

Comments

@dlopesa
Copy link

dlopesa commented May 3, 2024

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
image
@dlopesa dlopesa added the feature-request New feature or request label May 3, 2024
@rosco54
Copy link
Contributor

rosco54 commented May 4, 2024 •
edited

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
Copy link
Author

dlopesa commented May 4, 2024

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
Copy link
Contributor

rosco54 commented May 5, 2024

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature-request New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dlopesa @rosco54