charts README

The project's README from github.com/frappe/charts. As one markdown file: README.md.

charts-logo

Frappe Charts

GitHub-inspired modern, intuitive and responsive charts with zero dependencies

Explore Demos - Edit at CodeSandbox - Documentation

Frappe Charts

Frappe Charts is a simple charting library with a focus on a simple API. The design is inspired by various charts you see on GitHub.

Motivation

ERPNext needed a simple sales history graph for its user company master to help users track sales. While using c3.js for reports, the library didn’t align well with our product’s classic design. Existing JS libraries were either too complex or rigid in their structure and behavior. To address this, I decided to create a library for translating value pairs into relative shapes or positions, focusing on simplicity.

Key Features

Usage

npm install frappe-charts

Import in your project:

import { Chart } from 'frappe-charts'
// or esm import
import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'
// import css
import 'frappe-charts/dist/frappe-charts.min.css'

Or directly include script in your HTML

<script src="https://unpkg.com/[email protected]/dist/frappe-charts.min.umd.js"></script>

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']
})

Contributing

  1. Clone this repo.
  2. cd into project directory
  3. npm install
  4. npm i npm-run-all -D (optional --> might be required for some developers)
  5. npm run dev


Frappe Technologies

charts (frappe/charts)

Searching Database…

15.1K ·GitHub
Charts
What is this?Frappe Charts is a lightweight JavaScript charting library that renders simple, responsive charts as SVG, with zero dependencies.
Is this a hosted service or a library I embed in my own page?It's a library: you import it into a project or drop a script tag into your HTML, and charts render as SVG right in the browser.
How do I add it to a project?Import the installed package, or include the script tag directly in your HTML. To work on the library itself, clone the repo, run npm install, then npm run dev.
Does it pull in any other libraries?No - zero dependencies is the headline feature, so nothing else has to be installed first.
What kinds of charts can it draw?Axis charts as bars, lines and areas, plus mixed axis, pie, percentage and heatmap charts. You can annotate charts with x and y markers, highlight regions and add tooltips.
Why did the author build a new charting library instead of using c3.js?ERPNext needed a simple sales-history graph, but c3.js didn't match the product's classic design and other JS libraries felt too complex or rigid. So the author wrote a small library focused on turning value pairs into simple shapes and positions.
Can I update the data after a chart is already on the page?Yes - add, remove or update individual data points in place, or refresh the entire dataset. Colors, animations and custom titles are configurable too.
Can I try it without installing anything?Yes - the README links to live demos, including an editable version on CodeSandbox, so you can experiment in the browser first.
What are similar projects?uPlot, d3, apexcharts.js, Chart.js, plotly.js, visx, highcharts, G6
Which topics is it in?chart, zero-dependency, graph, charts, svg, visualization, data-visualization, javascript-library, developers, hacktoberfest, web-development, npm
Creator
frappe
Size
6.9 MB
Stars
15.1K
Updated
CommitDec 12Releasev1.6.3Apr 27
Age
8y
Commits · 90 Days