Frappe Charts alternatives and similar libraries
Based on the "d3" category.
Alternatively, view Frappe Charts alternatives based on common mentions on social networks and blogs.
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser -
p5.js
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs — -
BabylonJS
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. -
paper.js
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey -
mxGraph
DISCONTINUED. Diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor. -
processing.js
DISCONTINUED. Processing.js makes your data visualizations work using web standards and without any plug-ins -
jquery.sparkline
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser
CodeRabbit: AI Code Reviews for Developers
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Frappe Charts or a related project?
README
Frappe Charts GitHub-inspired modern, intuitive and responsive charts with zero dependencies Explore Demos » Edit at CodeSandbox » Documentation »
Contents
Installation
Via NPM
Install via npm
:
$ npm install frappe-charts
and include in your project:
import { Chart } from "frappe-charts"
Or include following for es-modules(eg:vuejs):
import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'
// import css
import 'frappe-charts/dist/frappe-charts.min.css'
or include within your HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-charts.min.umd.js"></script>
<!-- or -->
<script src="https://unpkg.com/[email protected]/dist/frappe-charts.min.umd.js"></script>
Usage
const data = {
labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
],
datasets: [
{
name: "Some Data", chartType: "bar",
values: [25, 40, 30, 35, 8, 52, 17, -4]
},
{
name: "Another Set", chartType: "line",
values: [25, 50, -10, 15, 18, 32, 27, 14]
}
]
}
const chart = new frappe.Chart("#chart", { // or a DOM element,
// new Chart() in case of ES6 module with above usage
title: "My Awesome Chart",
data: data,
type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
height: 250,
colors: ['#7cd6fd', '#743ee2']
})
Or for es-modules (replace new frappe.Chart()
with new Chart()
):
- const chart = new frappe.Chart("#chart", {
+ const chart = new Chart("#chart", { // or a DOM element,
// new Chart() in case of ES6 module with above usage
title: "My Awesome Chart",
data: data,
type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
height: 250,
colors: ['#7cd6fd', '#743ee2']
})
If you want to contribute:
- Clone this repo.
cd
into project directorynpm install
npm run dev
License
This repository has been released under the [MIT License](LICENSE)
Project maintained by Frappe. Used in ERPNext. Read the blog post.
*Note that all licence references and agreements mentioned in the Frappe Charts README section above
are relevant to that project's source code only.