Graph

The main entry point for creating visualizations with Graphika.

Quick Start

Render Time0 ms

Canvas Size600 × 350

Data Points0

Series Count0

Constructor

import Graph from "@feds01/graphika";

const graph = new Graph.Graph(containerId, options, lines);
graph.draw();

Parameter	Type	Description
containerId	string	ID of the HTML element containing a <canvas>
options	GraphOptions	Configuration object for the graph
lines	LineOptions[]	Array of line configurations

Options Overview

Option	Type	Description
title	object	Graph title text, position, and styling
x_label	string	Label for the X-axis
y_label	string	Label for the Y-axis
grid	object	Grid lines visibility and styling
scale	object	Axis ticks, labels, and numeric formatting
legend	object	Legend visibility, position, and alignment
animation	object	Animation settings for drawing

Configuration Sections

Each aspect of the graph can be customized independently:

Lines

Configure line appearance: colors, interpolation, styles, area fills, and point annotations.

Render Time0 ms

Canvas Size600 × 350

Data Points0

Series Count0

Grid

Control grid visibility and line styles.

Render Time0 ms

Canvas Size600 × 350

Data Points0

Series Count0

Scale

Customize axis ticks and labels.

Render Time0 ms

Canvas Size600 × 350

Data Points0

Series Count0

Title

Set the graph title text and alignment.

Legend

Position and style the legend for multi-series graphs.

Complete Example

import Graph from "@feds01/graphika";

const graph = new Graph.Graph(
    "my-chart",
    {
        title: {
            content: "Monthly Performance",
            alignment: "center",
        },
        x_label: "Month",
        y_label: "Value",
        grid: {
            gridded: true,
            gridLineStyle: "solid",
        },
        scale: {
            x: {
                ticks: 12,
                tickLabels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                optimiseTicks: true,
            },
        },
        legend: {
            draw: true,
            position: "top",
        },
    },
    [
        {
            label: "Revenue",
            data: [45, 52, 48, 61, 55, 67, 72, 68, 80, 75, 88, 92],
            colour: "#009FE5",
            interpolation: "cubic",
            area: { fill: true },
        },
        {
            label: "Target",
            data: [50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105],
            colour: "#FF6782",
            interpolation: "linear",
            style: "dashed",
        },
    ],
);

graph.draw();

Type Reference

For full TypeScript definitions, see BasicGraphOptions.