or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

chart-management.mdchart-types.mdindex.mdplugins.mdscales.mdutilities.mdvisual-elements.md
tile.json

chart-types.mddocs/

Chart Types

Built-in chart type controllers for different visualization patterns. Each controller handles dataset-specific data processing, element creation, and interaction handling.

Capabilities

Bar Charts

Creates bar and column charts for categorical data comparison.

class BarController extends DatasetController {
  static id: 'bar';
  static defaults: object;
  static overrides: object;
}

// Chart configuration
interface BarChartConfiguration {
  type: 'bar';
  data: {
    labels: string[];
    datasets: BarDataset[];
  };
  options?: BarChartOptions;
}

interface BarDataset {
  label?: string;
  data: number[];
  backgroundColor?: Color | Color[];
  borderColor?: Color | Color[];
  borderWidth?: number | number[];
  borderRadius?: number | BorderRadius | (number | BorderRadius)[];
  borderSkipped?: string | string[];
  base?: number | number[];
  grouped?: boolean;
  indexAxis?: 'x' | 'y';
  maxBarThickness?: number;
  minBarLength?: number;
  order?: number;
  stack?: string;
}

Usage Example:

const config = {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{
      label: 'Sales',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

Line Charts

Creates line charts for showing trends over continuous data.

class LineController extends DatasetController {
  static id: 'line';
  static defaults: object;
  static overrides: object;
}

// Chart configuration
interface LineChartConfiguration {
  type: 'line';
  data: {
    labels: string[];
    datasets: LineDataset[];
  };
  options?: LineChartOptions;
}

interface LineDataset {
  label?: string;
  data: (number | Point)[];
  backgroundColor?: Color;
  borderColor?: Color;
  borderWidth?: number;
  borderDash?: number[];
  borderDashOffset?: number;
  borderCapStyle?: CanvasLineCap;
  borderJoinStyle?: CanvasLineJoin;
  cubicInterpolationMode?: 'default' | 'monotone';
  fill?: boolean | string | number | object;
  lineTension?: number;
  pointBackgroundColor?: Color | Color[];
  pointBorderColor?: Color | Color[];
  pointBorderWidth?: number | number[];
  pointRadius?: number | number[];
  pointStyle?: PointStyle | PointStyle[];
  showLine?: boolean;
  spanGaps?: boolean | number;
  stepped?: boolean | 'before' | 'after' | 'middle';
  tension?: number;
}

Usage Example:

const config = {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Temperature',
      data: [20, 25, 22, 28, 24, 30],
      borderColor: 'rgba(255, 99, 132, 1)',
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      tension: 0.1,
      fill: true
    }]
  }
};

Radar Charts

Creates radar charts for multivariate data comparison.

class RadarController extends DatasetController {
  static id: 'radar';
  static defaults: object;
  static overrides: object;
}

// Chart configuration
interface RadarChartConfiguration {
  type: 'radar';
  data: {
    labels: string[];
    datasets: RadarDataset[];
  };
  options?: RadarChartOptions;
}

interface RadarDataset {
  label?: string;
  data: number[];
  backgroundColor?: Color;
  borderColor?: Color;
  borderWidth?: number;
  borderDash?: number[];
  borderDashOffset?: number;
  borderCapStyle?: CanvasLineCap;
  borderJoinStyle?: CanvasLineJoin;
  fill?: boolean | string | number;
  lineTension?: number;
  pointBackgroundColor?: Color | Color[];
  pointBorderColor?: Color | Color[];
  pointBorderWidth?: number | number[];
  pointRadius?: number | number[];
  pointStyle?: PointStyle | PointStyle[];
  tension?: number;
}

Doughnut Charts

Creates doughnut charts for proportional data visualization.

class DoughnutController extends DatasetController {
  static id: 'doughnut';
  static defaults: object;
  static overrides: object;
}

// Chart configuration
interface DoughnutChartConfiguration {
  type: 'doughnut';
  data: {
    labels: string[];
    datasets: DoughnutDataset[];
  };
  options?: DoughnutChartOptions;
}

interface DoughnutDataset {
  label?: string;
  data: number[];
  backgroundColor?: Color | Color[];
  borderColor?: Color | Color[];
  borderWidth?: number | number[];
  borderAlign?: 'center' | 'inner';
  borderRadius?: number | number[];
  circumference?: number;
  clip?: number | object;
  hoverBackgroundColor?: Color | Color[];
  hoverBorderColor?: Color | Color[];
  hoverBorderWidth?: number | number[];
  hoverOffset?: number | number[];
  offset?: number | number[];
  rotation?: number;
  spacing?: number;
  weight?: number;
}

Pie Charts

Creates pie charts, extends doughnut charts with 100% circumference.

class PieController extends DoughnutController {
  static id: 'pie';
  static defaults: object;
  static overrides: object;
}

// Chart configuration
interface PieChartConfiguration {
  type: 'pie';
  data: {
    labels: string[];
    datasets: PieDataset[];
  };
  options?: PieChartOptions;
}

// PieDataset extends DoughnutDataset
type PieDataset = DoughnutDataset;

Polar Area Charts

Creates polar area charts for proportional data with equal angles.

class PolarAreaController extends DatasetController {
  static id: 'polarArea';
  static defaults: object;
  static overrides: object;
}

// Chart configuration
interface PolarAreaChartConfiguration {
  type: 'polarArea';
  data: {
    labels: string[];
    datasets: PolarAreaDataset[];
  };
  options?: PolarAreaChartOptions;
}

interface PolarAreaDataset {
  label?: string;
  data: number[];
  backgroundColor?: Color | Color[];
  borderColor?: Color | Color[];
  borderWidth?: number | number[];
  borderAlign?: 'center' | 'inner';
  hoverBackgroundColor?: Color | Color[];
  hoverBorderColor?: Color | Color[];
  hoverBorderWidth?: number | number[];
}

Bubble Charts

Creates bubble charts for three-dimensional data visualization.

class BubbleController extends DatasetController {
  static id: 'bubble';
  static defaults: object;
  static overrides: object;
}

// Chart configuration
interface BubbleChartConfiguration {
  type: 'bubble';
  data: {
    datasets: BubbleDataset[];
  };
  options?: BubbleChartOptions;
}

interface BubbleDataset {
  label?: string;
  data: BubbleDataPoint[];
  backgroundColor?: Color | Color[];
  borderColor?: Color | Color[];
  borderWidth?: number | number[];
  hoverBackgroundColor?: Color | Color[];
  hoverBorderColor?: Color | Color[];
  hoverBorderWidth?: number | number[];
  hoverRadius?: number | number[];
  pointRadius?: number | number[];
  pointStyle?: PointStyle | PointStyle[];
  rotation?: number | number[];
}

interface BubbleDataPoint {
  x: number;
  y: number;
  r: number;
}

Scatter Charts

Creates scatter plots, extends line charts without connecting lines.

class ScatterController extends LineController {
  static id: 'scatter';
  static defaults: object;
  static overrides: object;
}

// Chart configuration
interface ScatterChartConfiguration {
  type: 'scatter';
  data: {
    datasets: ScatterDataset[];
  };
  options?: ScatterChartOptions;
}

// ScatterDataset extends LineDataset
interface ScatterDataset extends LineDataset {
  data: ScatterDataPoint[];
  showLine?: boolean; // Typically false for scatter
}

interface ScatterDataPoint {
  x: number;
  y: number;
}

Usage Example:

const config = {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'Scatter Dataset',
      data: [{
        x: -10,
        y: 0
      }, {
        x: 0,
        y: 10
      }, {
        x: 10,
        y: 5
      }],
      backgroundColor: 'rgba(255, 99, 132, 1)'
    }]
  },
  options: {
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      }
    }
  }
};

Types

type ChartType = 'line' | 'bar' | 'radar' | 'doughnut' | 'pie' | 'polarArea' | 'bubble' | 'scatter';

interface DatasetController {
  static id: string;
  static defaults: object;
  static overrides: object;
  
  constructor(chart: Chart, datasetIndex: number);
  
  initialize(): void;
  update(mode: UpdateMode): void;
  draw(): void;
  reset(): void;
  destroy(): void;
}

type Color = string | CanvasGradient | CanvasPattern;

type PointStyle = 'circle' | 'cross' | 'crossRot' | 'dash' | 'line' | 'rect' | 'rectRounded' | 'rectRot' | 'star' | 'triangle' | HTMLImageElement | HTMLCanvasElement;

interface BorderRadius {
  topLeft: number;
  topRight: number;
  bottomLeft: number;
  bottomRight: number;
}

interface Point {
  x: number;
  y: number;
}

// Chart-specific options interfaces
interface BarChartOptions extends ChartOptions<'bar'> {
  indexAxis?: 'x' | 'y';
  skipNull?: boolean;
  grouped?: boolean;
  maxBarThickness?: number;
  categoryPercentage?: number;
  barPercentage?: number;
}

interface LineChartOptions extends ChartOptions<'line'> {
  showLine?: boolean;
  spanGaps?: boolean | number;
}

interface RadarChartOptions extends ChartOptions<'radar'> {
  scale?: RadialLinearScaleOptions;
}

interface DoughnutChartOptions extends ChartOptions<'doughnut'> {
  circumference?: number;
  rotation?: number;
  cutout?: number | string;
  radius?: number | string;
}

interface PieChartOptions extends DoughnutChartOptions {
  // Inherits from DoughnutChartOptions
}

interface PolarAreaChartOptions extends ChartOptions<'polarArea'> {
  scale?: RadialLinearScaleOptions;
}

interface BubbleChartOptions extends ChartOptions<'bubble'> {
  // Extends base chart options
}

interface ScatterChartOptions extends LineChartOptions {
  showLine?: false; // Typically false for scatter
}