112 lines
2.5 KiB
Markdown
112 lines
2.5 KiB
Markdown
|
# 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:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script src="retrochart.js"></script>
|
||
|
|
```
|
||
|
|
|
||
|
|
add a canvas element:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<canvas id="myChart"></canvas>
|
||
|
|
```
|
||
|
|
|
||
|
|
initialize the chart with your data:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
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:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
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
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!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.
|