minimalist js chart lib

Go to file

anon 39ce55c9c4 initial commit		2024-10-09 23:19:36 +00:00
readme.md	initial commit	2024-10-09 23:19:36 +00:00
retrochart.js	initial commit	2024-10-09 23:19:36 +00:00

readme.md

retrochart

sometimes you just want a simple bar chart without the hassle. retrochart.js is a minimalist library for drawing bar charts on an HTML5 canvas. no dependencies, no bloat—just straightforward charting.

usage

include the script in your html:

<script src="retrochart.js"></script>

add a canvas element:

<canvas id="myChart"></canvas>

initialize the chart with your data:

const data = [
    { label: 'apples', value: 30 },
    { label: 'bananas', value: 15 },
    { label: 'cherries', value: 25 },
];

const chart = new RetroBarChart('myChart', data);

customization

you can customize the chart with options:

const options = {
    barColor: '#ff6347',
    barHoverColor: '#ffa07a',
    title: 'fruit sales',
    titleColor: '#ffffff',
    titleFont: '20px Arial',
    textColor: '#ffffff',
    tooltipBgColor: 'rgba(0, 0, 0, 0.7)',
    tooltipTextColor: '#ff6347',
    formatTooltip: (label, value) => `${label}: ${value} sold`,
};

const chart = new RetroBarChart('myChart', data, options);

methods

updateData(newData) - update the chart with new data.
updateOptions(newOptions) - update chart options.

full example

<!DOCTYPE html>
<html>
<head>
    <title>retrochart.js example</title>
    <script src="retrochart.js"></script>
    <style>
        body {
            background-color: #2e3440;
            color: #d8dee9;
            font-family: sans-serif;
            text-align: center;
        }
        canvas {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        const data = [
            { label: 'january', value: 20 },
            { label: 'february', value: 35 },
            { label: 'march', value: 25 },
            { label: 'april', value: 40 },
        ];

        const options = {
            barColor: '#88c0d0',
            barHoverColor: '#81a1c1',
            title: 'monthly revenue',
            titleColor: '#eceff4',
            titleFont: '24px Arial',
            textColor: '#eceff4',
            tooltipBgColor: 'rgba(46, 52, 64, 0.8)',
            tooltipTextColor: '#88c0d0',
            formatTooltip: (label, value) => `${label}: $${value}k`,
        };

        const chart = new RetroBarChart('myChart', data, options);
    </script>
</body>
</html>

notes

no external libraries required.
handles canvas resizing and visibility changes automatically.
supports tooltips and hover effects.

license

do whatever you want with it.