Dual Axis Charts

Combine different metrics on independent scales for enhanced data analysis

View Live Example

See dual axis charts in action with interactive examples

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.

Basic Dual Axis Chart

Combine bars and lines with dual Y-axes:

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:

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:

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

Selecting Metrics

• Choose complementary data series for dual axis charts
• Ensure the scales’ units are relevant and helpful

Design Considerations

• Keep the design clear with distinct colors
• Avoid information overload - focus on key metrics

Performance

• Limit the number of points displayed for clarity
• Use staggered animations for smoother rendering

Common Use Cases

Financial Reports

Correlate revenue and profit margins for comprehensive insights

Sales Dashboard

Track sales growth vs conversion rates using multiple axes

Energy Consumption

Compare fuel types and efficiency improvements over time

Scientific Analysis

Investigate relationships between distinct datasets

Ready to explore more?

Explore Animations

Bring charts to life with smooth transitions

Theming and Styling

Customize chart appearances for brand consistency