Minimal Bar/Line/Pie Chart JavaScript Library – Chartly.js

Chartly is a lightweight and easy-to-use JavaScript library that can be used to create basic charts using HTML5 canvas.

It supports bar, line, and pie charts with customizable options. You can customize colors, adjust options, and even add axis labels and gridlines to enhance your charts.

How to use it:

1. Install & download Chartly using NPM:

# NPM
$ npm install chartly

2. You can choose to import the entire library or load specific chart types like BarChart, LineChart, or PieChart individually from their respective paths.

import Chartly from "chartly";

// OR
import BarChart from './charts/BarChart.js';
import LineChart from './charts/LineChart.js';
import PieChart from './charts/PieChart.js';
const  Chartly = {
    BarChart,
    LineChart,
    PieChart
};
export default Chartly;

3. Create an HTML5 canvas element where the chart will be rendered:

<canvas id="example" width="600" height="450"></canvas>

4. Organize your data appropriately for each chart type:

// Bar Chart
const barData = {
  labels: ['January', 'February', 'March', 'April', 'May'],
  datasets: [{
    data: [15, 25, 10, 30, 20],
    label: 'Bar Chart Data',
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgba(255, 99, 132, 1)',
    borderWidth: 1
  }]
};

// Line Chart
const lineData = {
  labels: ['January', 'February', 'March', 'April', 'May'],
  datasets: [{
    data: [5, 20, 15, 25, 10],
    label: 'Line Chart Data',
    borderColor: 'rgba(54, 162, 235, 1)',
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    fill: true
  }]
};

// Pie Chart
const pieData = {
  datasets: [{
    data: [10, 20, 30, 40],
    backgroundColor: ['red', 'blue', 'green', 'yellow']
  }],
  labels: ['Red', 'Blue', 'Green', 'Yellow']
};

5. Create a new chart instance and draw it on the canvas. You can replace BarChart with LineChart or PieChart depending on your needs, and modify the color property for customization.

const myCanvas = document.getElementById('example').getContext('2d');
new Chartly.BarChart(myCanvas, barData, { 
  color: 'red' 
}).draw();