> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cristalyse.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Dual Axis Charts

> Combine different metrics on independent scales for enhanced data analysis

<Card title="View Live Example" icon="play" href="https://example.cristalyse.com/#/dual-y-axis" target="_blank">
  See dual axis charts in action with interactive examples
</Card>

## Overview

Dual axis charts allow you to correlate two different metrics using independent Y-scales. Cristalyse offers full support for dual axis configurations across various chart types, providing a complete view of complex data relationships.

<div align="center">
  <img src="https://mintcdn.com/cristalyse/PZSY86PoujCBYHYy/images/cristalyse_dual_axis_chart.gif?s=a581f011f568d910cb3e89bc28f6b233" alt="Dual Axis Chart" width="600" data-path="images/cristalyse_dual_axis_chart.gif" />

  <br />

  <em>Dual axis charts for correlating two different metrics on independent scales</em>
</div>

## Basic Dual Axis Chart

Combine bars and lines with dual Y-axes:

```dart theme={null}
final data = [
  {'month': 'Jan', 'revenue': 100, 'growth': 2.5},
  {'month': 'Feb', 'revenue': 150, 'growth': 3.0},
  {'month': 'Mar', 'revenue': 130, 'growth': 2.8},
];

CristalyseChart()
  .data(data)
  .mapping(x: 'month', y: 'revenue')     // Primary Y-axis
  .mappingY2('growth')                  // Secondary Y-axis
  .geomBar(yAxis: YAxis.primary)         // Bind bars to primary axis
  .geomLine(
    yAxis: YAxis.secondary,
    strokeWidth: 2.0,
    color: Colors.orange,
  )
  .scaleXOrdinal()
  .scaleYContinuous(min: 0, max: 200)
  .scaleY2Continuous(min: 0, max: 5)
  .build()
```

## Stacked Dual Axis Example

Utilize dual axes with stacked bars:

```dart theme={null}
final energyData = [
  {'year': '2020', 'coal': 30, 'renewables': 20, 'efficiency': 0.8},
  {'year': '2021', 'coal': 25, 'renewables': 30, 'efficiency': 0.9},
  {'year': '2022', 'coal': 20, 'renewables': 35, 'efficiency': 1.0},
];

CristalyseChart()
  .data(energyData)
  .mapping(x: 'year', y: 'coal')            // Primary Y-axis
  .mappingY2('efficiency')                 // Secondary Y-axis
  .geomBar(yAxis: YAxis.primary,          // Bind to primary axis
    color: Colors.blue,
    alpha: 0.7,
    style: BarStyle.stacked
  )
  .geomLine(
    yAxis: YAxis.secondary,
    strokeWidth: 3.0,
    color: Colors.green,
  )
  .scaleXOrdinal()
  .scaleYContinuous(min: 0)
  .scaleY2Continuous(min: 0, max: 2)
  .build()
```

## Interactive Features

### Hover and Zoom

Add interactivity to enhance data exploration:

```dart theme={null}
CristalyseChart()
  .data(data)
  .mapping(x: 'month', y: 'revenue')     
  .mappingY2('growth')                  
  .geomBar(yAxis: YAxis.primary)        
  .geomLine(
    yAxis: YAxis.secondary,
    strokeWidth: 2.0,
    color: Colors.orange,
  )
  .interaction(
    tooltip: TooltipConfig(
      builder: (point) {
        return Text(
          '${point.getDisplayValue('month')}: Revenue ${point.getDisplayValue('revenue')}k, Growth ${point.getDisplayValue('growth')}%',
          style: TextStyle(color: Colors.white),
        );
      },
    ),
  )
  .build()
```

## Styling Options

Customize colors, scales, and styles to match your needs. Dual axis charts provide flexibility in how data series are presented, whether using bars, lines, or points across primary and secondary axes.

## Best Practices

<AccordionGroup>
  <Accordion title="Selecting Metrics">
    * Choose complementary data series for dual axis charts
    * Ensure the scales' units are relevant and helpful
  </Accordion>

  <Accordion title="Design Considerations">
    * Keep the design clear with distinct colors
    * Avoid information overload - focus on key metrics
  </Accordion>

  <Accordion title="Performance">
    * Limit the number of points displayed for clarity
    * Use staggered animations for smoother rendering
  </Accordion>
</AccordionGroup>

## Common Use Cases

<CardGroup cols={2}>
  <Card title="Financial Reports" icon="coins">
    Correlate revenue and profit margins for comprehensive insights
  </Card>

  <Card title="Sales Dashboard" icon="chart-line">
    Track sales growth vs conversion rates using multiple axes
  </Card>

  <Card title="Energy Consumption" icon="bolt">
    Compare fuel types and efficiency improvements over time
  </Card>

  <Card title="Scientific Analysis" icon="flask">
    Investigate relationships between distinct datasets
  </Card>
</CardGroup>

## Ready to explore more?

<CardGroup cols={2}>
  <Card title="Explore Animations" icon="play" href="/features/animations">
    Bring charts to life with smooth transitions
  </Card>

  <Card title="Theming and Styling" icon="palette" href="/features/theming">
    Customize chart appearances for brand consistency
  </Card>
</CardGroup>