​
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

�7fAccordionGroup �7fAccordion title=“Selecting Metrics” - Choose complementary data series for dual axis charts

  • Ensure the scales’ units are relevant and helpful �7f/Accordion

�7fAccordion title=“Design Considerations” - Keep the design clear with distinct colors

  • Avoid information overload - focus on key metrics �7f/Accordion

�7fAccordion title=“Performance”/7f - Limit the number of points displayed for clarity

  • Use staggered animations for smoother rendering �7f/Accordion �7f/AccordionGroup

​
Common Use Cases

CardGroup cols= 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= 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