​
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!


​
Understanding the Grammar

Cristalyse follows the Grammar of Graphics pattern: