​
Your First Chart in 30 Seconds

Let’s create a beautiful scatter plot with just a few lines of code.
1

Import Cristalyse

Add the import to your Dart file:
import 'package:cristalyse/cristalyse.dart';
import 'package:flutter/material.dart';
2

Prepare Your Data

Create a simple dataset:
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'},
];
3

Build Your Chart

Create the chart with grammar of graphics:
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())
  .build()

​
Complete Example

Here’s the full widget ready to use: 
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())
          .build(),
      ),
    );
  }
}
Result: A beautiful, animated scatter plot with color-coded categories!
Your First Chart Result

​
Formatting Axis Labels

You’ll often want formatted axis labels. The labels parameter takes any function that converts a number to a string: 
CristalyseChart()
  .data(salesData)
  .mapping(x: 'quarter', y: 'revenue')
  .geomBar()
  .scaleYContinuous(labels: (value) => '\$${value}') // $150
  .scaleXOrdinal()
  .build()
For robust, locale-aware formatting, use NumberFormat: 
import 'package:intl/intl.dart';

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

​
Understanding the Grammar

Cristalyse follows the Grammar of Graphics pattern: