All Projects → frappe → Charts

frappe / Charts

Licence: mit
Simple, responsive, modern SVG Charts with zero dependencies

Programming Languages

javascript
184084 projects - #8 most used programming language
SCSS
7915 projects
Makefile
30231 projects

Projects that are alternatives of or similar to Charts

React D3 Tree
🌳 React component to create interactive D3 tree graphs
Stars: ✭ 543 (-96.15%)
Mutual labels:  graph, svg, chart
X6
🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
Stars: ✭ 2,686 (-80.97%)
Mutual labels:  graph, svg, chart
Pure Vue Chart
Simple and lightweight vue chart component without using chart library dependencies
Stars: ✭ 50 (-99.65%)
Mutual labels:  graph, svg, chart
Billboard.js
📊 Re-usable, easy interface JavaScript chart library based on D3.js
Stars: ✭ 5,032 (-64.34%)
Mutual labels:  graph, svg, chart
Amcharts4
The most advanced amCharts charting library for JavaScript and TypeScript apps.
Stars: ✭ 907 (-93.57%)
Mutual labels:  graph, svg, chart
Chart.xkcd
Chart.xkcd is a chart library that plots “sketchy”, “cartoony” or “hand-drawn” styled charts.
Stars: ✭ 6,982 (-50.52%)
Mutual labels:  graph, svg, chart
C3
📊 A D3-based reusable chart library
Stars: ✭ 9,163 (-35.07%)
Mutual labels:  graph, svg, chart
React D3 Components
D3 Components for React
Stars: ✭ 1,599 (-88.67%)
Mutual labels:  graph, chart
G2
📊 A highly interactive data-driven visualization grammar for statistical charts.
Stars: ✭ 11,020 (-21.91%)
Mutual labels:  graph, svg
Npmcharts.com
Compare npm package downloads over time
Stars: ✭ 129 (-99.09%)
Mutual labels:  graph, chart
Wechart
Create all the [ch]arts by cax or three.js - Cax 和 three.js 创造一切图[表]
Stars: ✭ 152 (-98.92%)
Mutual labels:  svg, chart
React Native Chart
[NOT MAINTAINED] 📊 Add line, area, pie, and bar charts to your React Native app
Stars: ✭ 1,574 (-88.85%)
Mutual labels:  svg, chart
React Fast Charts
Blazing Fast Charting Library in React with loading time less than 50ms
Stars: ✭ 113 (-99.2%)
Mutual labels:  svg, chart
Pyecharts Snapshot
renders the output of pyecharts as png, jpeg, gif, svg, eps, pdf and raw base64
Stars: ✭ 142 (-98.99%)
Mutual labels:  svg, chart
Graphic
A Flutter data visualization library based on Grammar of Graphics.
Stars: ✭ 173 (-98.77%)
Mutual labels:  graph, chart
Asciigraph
Go package to make lightweight ASCII line graph ╭┈╯ in command line apps with no other dependencies.
Stars: ✭ 1,805 (-87.21%)
Mutual labels:  graph, chart
Coingraph
Coingraph is a real-time graph for cryptocurrencies.
Stars: ✭ 116 (-99.18%)
Mutual labels:  graph, chart
Aachartkit Swift
📈📊📱💻🖥️An elegant modern declarative data visualization chart framework for iOS, iPadOS and macOS. Extremely powerful, supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types. 极其精美而又强大的跨平台数据可视化图表框架,支持柱状图、条形图、…
Stars: ✭ 1,962 (-86.1%)
Mutual labels:  graph, chart
V Chart Plugin
Easily bind a chart to the data stored in your Vue.js components.
Stars: ✭ 188 (-98.67%)
Mutual labels:  graph, chart
Visx
🐯 visx | visualization components
Stars: ✭ 14,544 (+3.06%)
Mutual labels:  svg, chart

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:

  1. Clone this repo.
  2. cd into project directory
  3. npm install
  4. npm run dev

License

This repository has been released under the MIT License


Project maintained by Frappe. Used in ERPNext. Read the blog post.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].