Chartly is a lightweight JavaScript library for creating simple yet customizable charts, including bar charts, line charts, and pie charts. It's designed to be easy to use and integrate into your projects.
You can install Chartly via npm or include it directly in your project.
Run the following command in your project directory to install Chartly:
npm install chartly
Download the library and include it in your HTML file:
<script type="module" src="path/to/chartly/src/index.js"></script>
If you are using modules, you can import Chartly as follows:
import Chartly from "chartly";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chartly Example</title>
</head>
<body>
<!-- Bar Chart -->
<canvas id="barChart" width="600" height="400"></canvas>
<!-- Line Chart -->
<canvas id="lineChart" width="600" height="400"></canvas>
<!-- Pie Chart -->
<canvas id="pieChart" width="600" height="400"></canvas>
<script type="module">
import Chartly from 'path/to/chartly/src/index.js';
// Bar Chart
const barCtx = document.getElementById('barChart').getContext('2d');
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
}]
};
new Chartly.BarChart(barCtx, barData, {
color: 'blue'
}).draw();
// Line Chart
const lineCtx = document.getElementById('lineChart').getContext('2d');
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
}]
};
new Chartly.LineChart(lineCtx, lineData, {
color: 'green'
}).draw();
// Pie Chart
const pieCtx = document.getElementById('pieChart').getContext('2d');
const pieData = {
datasets: [{
data: [10, 20, 30, 40],
backgroundColor: ['red', 'blue', 'green', 'yellow']
}],
labels: ['Red', 'Blue', 'Green', 'Yellow']
};
new Chartly.PieChart(pieCtx, pieData, {
colors: ['red', 'blue', 'green', 'yellow']
}).draw();
</script>
</body>
</html>
Constructor:
new Chartly.BarChart(context, data, options)
Parameters:
Methods:
Constructor:
new Chartly.LineChart(context, data, options)
Parameters:
Methods:
Constructor:
new Chartly.PieChart(context, data, options)
Parameters:
Methods:
Chartly provides an easy-to-use interface for generating different types of charts. The library is designed with simplicity and performance in mind, making it suitable for both small and large-scale projects. By leveraging the Canvas API, Chartly offers a flexible solution for visualizing data without requiring additional dependencies.
We welcome contributions to Chartly! If you have suggestions, bug reports, or feature requests, please feel free to submit them through GitHub issues or pull requests. Your feedback and contributions are greatly appreciated!
FAQs
Create basic charts (bar, line, pie) with minimal setup
We found that chartly demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.