Multiple Y-Axis Chart with ApexCharts

ApexCharts provides a robust way to create charts with multiple Y-axes, allowing you to plot different data sets with distinct scales on the same graph. This is particularly useful when dealing with data that have varying ranges or units. Here’s a comprehensive guide to setting up a multiple Y-axis chart using ApexCharts.

Creating a Multiple Y-Axis Chart with ApexCharts

1. Basic Configuration:

To configure a chart with multiple Y-axes, you need to define the yaxis property in the chart options. Each Y-axis can have its own set of configurations, such as position, title, and scaling. Here’s a basic example:

var options = {
  chart: {
    type: 'line'
  },
  series: [
    {
      name: 'Cumulative Receipt',
      data: [30, 40, 45, 50, 49, 60, 70]
    },
    {
      name: 'Cumulative Projected Inventory',
      data: [20, 30, 35, 40, 39, 50, 60]
    },
    {
      name: 'Week-wise Receipt',
      data: [10, 20, 25, 30, 29, 40, 50]
    }
  ],
  yaxis: [
    {
      title: {
        text: 'Cumulative Metrics'
      },
      seriesName: ['Cumulative Receipt', 'Cumulative Projected Inventory'],
      opposite: false // Left Y-axis
    },
    {
      title: {
        text: 'Weekly Metrics'
      },
      seriesName: 'Week-wise Receipt',
      opposite: true // Right Y-axis
    }
  ],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

2. Customizing Each Y-Axis:

  • Title and Labels: Each Y-axis can have a distinct title and can display labels differently. For example, one axis can show values in dollars while the other shows counts or percentages.
  • Opposite Positioning: By setting opposite: true for a Y-axis, you can position it on the right side of the chart, allowing for better visual distinction between the data sets.
  • Minimum and Maximum Values: You can set specific min and max values for each axis to control the scale, ensuring that the data is displayed clearly without unnecessary gaps or overlaps.

3. Advanced Features:

  • Different Chart Types: You can combine different chart types in a single chart. For example, you might have a line chart for one dataset and a bar chart for another, each with its own Y-axis​ (ApexCharts.js)​​ (ApexCharts.js)​​ (Home Assistant Community)​.
  • Dynamic Scaling: ApexCharts automatically scales the Y-axes based on the data. However, you can also set fixed scales or use functions to dynamically adjust them based on the current data range.

4. Example in Practice:

Here’s a more detailed example using ApexCharts’ documentation and demo pages:

  • ApexCharts Documentation on Multi-Axis: You can find detailed examples and configurations in the ApexCharts documentation.
  • Live Demo: To see a working example, visit the ApexCharts multi-axis demo which provides a practical illustration of how to implement these charts.

For more information, you can explore these resources:

By leveraging these configurations, you can effectively visualize complex datasets with varying scales, enhancing the clarity and usability of your charts.

Hey folks, I'm Vivek Kumar Pandey, a software engineer with a passion for crafting elegant solutions to complex problems. From the bustling streets of Mumbai to the heart of Bangalore's tech scene, I've journeyed through the world of programming, leaving my mark one line of code at a time. Join me as I continue to explore, innovate, and push the boundaries of what's possible in the digital realm.

Related Posts

Enhancing CKEditor with Font and Background Color Options

In this article, we will guide you through the process of enhancing your CKEditor with font and background color options. By the end of this tutorial, you…

Manage environment-specific API URLs in React applications

When developing a React application that interacts with APIs, it’s essential to manage different API URLs for various environments such as development, staging, and production. In this…

HTML to PDF in JavaScript using jsPDF

If you are looking for something that can create server side PDF easily then you are at right place. HTML to PDF in JavaScript’s jsPDF is easier…

Leave a Reply

Your email address will not be published. Required fields are marked *