Quick Start

import 'package:cristalyse/cristalyse.dart';
import 'package:flutter/material.dart';

class MyFirstChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = [
      {'x': 1, 'y': 2, 'category': 'A'},
      {'x': 2, 'y': 3, 'category': 'B'},
      {'x': 3, 'y': 1, 'category': 'A'},
      {'x': 4, 'y': 4, 'category': 'C'},
    ];

    return Scaffold(
      appBar: AppBar(title: Text('My First Chart')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: CristalyseChart()
          .data(data)
          .mapping(x: 'x', y: 'y', color: 'category')
          .geomPoint(
            size: 8.0,
            alpha: 0.8,
            shape: PointShape.triangle,
            borderWidth: 1.5,
          )
          .scaleXContinuous()
          .scaleYContinuous()
          .theme(ChartTheme.defaultTheme())
          .legend() // ✨ Add a legend to show categories
          .build(),
      ),
    );
  }
}

CristalyseChart()
  .data(salesData)
  .mapping(x: 'quarter', y: 'revenue')
  .geomBar()
  .scaleYContinuous(labels: (value) => '\$${value}') // $150
  .scaleXOrdinal()
  .build()

import 'package:intl/intl.dart';

CristalyseChart()
  .data(salesData)
  .mapping(x: 'quarter', y: 'revenue')
  .geomBar()
  .scaleYContinuous(labels: NumberFormat.simpleCurrency().format) // $1,234.56
  .scaleXOrdinal()
  .build()

final salesData = [
  {'quarter': 'Q1', 'revenue': 1000, 'product': 'ProductA'},
  {'quarter': 'Q2', 'revenue': 1200, 'product': 'ProductA'},
  {'quarter': 'Q1', 'revenue': 800, 'product': 'ProductB'},
  {'quarter': 'Q2', 'revenue': 950, 'product': 'ProductB'},
];

CristalyseChart()
  .data(salesData)
  .mapping(x: 'quarter', y: 'revenue', color: 'product') // Color mapping required
  .geomBar(style: BarStyle.grouped)
  .legend() // ✨ Automatically creates legend for each product
  .build();

// Bottom legend (great for mobile)
.legend(position: LegendPosition.bottom)

// Right side legend
.legend(position: LegendPosition.right)

// Top-left corner  
.legend(position: LegendPosition.topLeft)