Quick Start
Your first toomanychart
Introduction
toomanycharts is a lightweight, work-in-progress, clientside & soon to be ssr-friendly library built with deno to rapidly create inline SVG charts with minimal overhead.
Want a more in-depth explanation?
Head over to the Why toomanycharts page to learn more about the motivation & purpose of toomanycharts.
Quick Start
Getting your first chart as soon as possible!
Installation
npm install toomanychartsUsage
All that's needed to create a simple bar chart:
const myChart = barchart({
data: [50, 100, 30],
});
if (myChart) document.body.appendChild(myChart);Will result in a chart like so:
Ironically, not inlined here (as of now) because turbopack was complaining about it causing a hydration mismatch.
Keep Going
Add some labels:
barchart({
data: [50, 100, 30],
labels: ['1st', '2nd', '3rd'],
});
Place it on the top instead:
barchart({
data: [50, 100, 30],
labels: ['1st', '2nd', '3rd'],
placement: 'top',
});