Getting Started

Graphika is a fast JavaScript library to draw elegant graphs in the browser.

Installation

npm

npm install @feds01/graphika

yarn

yarn add @feds01/graphika

pnpm

pnpm add @feds01/graphika

Or include via script tag:

<script src="path/to/graphika.min.js"></script>

Quick Start

1. Create a Container

<div id="graph">
    <canvas width="800" height="600"></canvas>
</div>

2. Initialize and Draw

import Graph from "@feds01/graphika";

const graph = new Graph.Graph(
    "graph",
    {
        title: { content: "My First Graph" },
        x_label: "X-Axis",
        y_label: "Y-Axis",
    },
    [
        {
            label: "Series A",
            data: [1, 5, 3, 8, 4, 9, 2, 7, 6, 10],
            colour: Graph.Colours.PURPLE,
            interpolation: "cubic",
        },
    ],
);

graph.draw();

Result

Render Time0 ms

Canvas Size600 × 350

Data Points0

Series Count0

Next Steps

• Explore more examples
• Try the interactive playground
• Learn about configuration options:
  • Lines - Colors, styles, interpolation
  • Grid - Background grid options
  • Scale - Axis ticks and labels
  • Title - Title text and alignment
  • Legend - Legend display options