Simple, responsive, modern SVG Charts with zero dependencies

Overview

Frappe Charts

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

Explore Demos » Edit at CodePen »

Contents

Installation

  • 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.iife.js"></script>
      <!-- or -->
      <script src="https://unpkg.com/[email protected]/dist/frappe-charts.min.iife.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", type: "bar",
            values: [25, 40, 30, 35, 8, 52, 17, -4]
        },
        {
            name: "Another Set", type: "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

Updates

v1.0.0
  • Major rewrite out. Some new features include:
    • Mixed type axis datasets
    • Stacked bar charts
    • Value over data points
    • Y Markers and regions
    • Dot size, Bar space size, and other options
    • Legend for axis charts
  • We would be looking to incorporate existing PRs and issues in the meantime.
Please read #93 for v0.1.0 updates on rework and development.
v0.0.7
v0.0.5
v0.0.4
  • Build update: Shipped an ES6 module, along with the browser friendly IIFE.
v0.0.2
  • We have an animated Pie Chart! Thanks @sheweichun.
  • @tobiaslins contributed tweaks for his quest to make these easy to use with React. Check out his repo and updates at #24 to learn more :)
  • A new logo.
v0.0.1
  • The very first version out, with animatable bars and lines, a percentage chart and a heatmap. GitHub-style.

License

This repository has been released under the MIT License


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

Comments
  • Support React

    Support React

    Currently it is not possible to use this library with React (easily).

    Some modifications are needed to use it.

    I want to discuss what should happen in this repository and what not.

    I already did small changes to use it as a simple React component.

    import React, { Component } from 'react'
    import PropTypes from 'prop-types'
    import Frappe from 'frappe-charts/src/scripts/charts.js'
    
    import 'frappe-charts/dist/frappe-charts.min.css' // to import styling
    
    class Chart extends Component {
      componentDidMount() {
        const {title, data, type = 'bar', height = 250} = this.props
        this.c = new Frappe({
          parent: this.chart,
          title,
          data,
          type,
          height
        })
      }
    
      render() {
        return <div ref={chart => (this.chart = chart)}/>
      }
    }
    
    export default Chart
    

    I created a demo repo for showcase: https://github.com/tobiaslins/frappe-charts-react-example

    enhancement 
    opened by tobiaslins 22
  • 'Chart is not a constructor' when importing as ES6 module

    'Chart is not a constructor' when importing as ES6 module

    After installing as a npm module (npm install frappe-charts), I'm unable to import a constructor.

    Docs says to import like this:

    import {Chart} from 'frappe-charts'
    

    ...the docs from NPM says to import like this:

    import Chart from 'frappe-charts/dist/frappe-charts.min.esm'
    

    Either way it doesn't work for me.

    const chart = new Chart(this.chartWrapper, {...})
    

    results in *.Chart is not a constructor error.

    I'm using Webpack 4 and React 16 (but React shouldn't have anything to do with this issue).

    Frappé Charts version: v1.1.0

    Any suggestions? Thanks!

    help wanted question 
    opened by maulerjan 16
  • [Feature Request] Add Typescript typedefinitions

    [Feature Request] Add Typescript typedefinitions

    It would be great if this has native support for Angular by bringing in type definitions.

    Kudos for a cool library 👍

    EDIT: To make it more clear, I'm not asking for Angular wrappers. Just type-definitions, which would let me use the library without declare-ing constants all over the place in Typescript and killing the whole purpose of using Typescript. And as @harunurhan has mentioned below, it's also great for documentation as I can simply look up the definition file to know if a method or parameter is required.

    Feature Request 
    opened by rajshrimohanks 11
  • How do you change the chart type at runtime ?

    How do you change the chart type at runtime ?

    I want to be able to do something like in this demo image

    But I want to do it without recreating the chart object every time. So far I have tried doing : (Assuming initially the chart was a bar graph)

    chart.type = 'donut' chart.draw(true)

    Does not seem to work. Is there any API to do this? Also, many api's that are talked about in the Issues section are not available in the docs.

    One more thing. Is there any way to change the font-size of the labels and the title in the chart?

    help wanted 
    opened by TheCelebrimbor 9
  • TypeError: Cannot read property 'xPos' of undefined

    TypeError: Cannot read property 'xPos' of undefined

    Expected Behaviour

    Allow you to freely click the screen

    Actual Behaviour

    Uncaught TypeError: Cannot read property 'xPos' of undefined at e.value (AxisChart.js:408) at HTMLDivElement. (AxisChart.js:394)

    Steps to Reproduce:

    • v1.3.0 and react v16.12.0
    • render line graphic
    • Click many times in and out of the graphic

    NOTE: Add a GIF/Screenshot if required. image image

    Frappé Charts version: 1.3.0

    opened by CristianWesleyFront 9
  • Not working with next.js

    Not working with next.js

    Expected Behaviour

    I was trying to run this example: https://github.com/tobiaslins/frappe-charts-react-example with next.js.

    Actual Behaviour

    
    _frappeCharts2.default is not a constructor
    TypeError: _frappeCharts2.default is not a constructor
        at Chart.componentDidMount (http://localhost:3000/_next/1510152164727/page/:45412:19)
        at Chart.proxiedComponentDidMount (http://localhost:3000/_next/1510152164727/main.js:16882:40)
        at commitLifeCycles (http://localhost:3000/_next/1510152164727/commons.js:11511:24)
        at commitAllLifeCycles (http://localhost:3000/_next/1510152164727/commons.js:12300:9)
        at HTMLUnknownElement.callCallback (http://localhost:3000/_next/1510152164727/commons.js:1305:14)
        at Object.invokeGuardedCallbackDev (http://localhost:3000/_next/1510152164727/commons.js:1344:16)
        at invokeGuardedCallback (http://localhost:3000/_next/1510152164727/commons.js:1201:27)
        at commitAllWork (http://localhost:3000/_next/1510152164727/commons.js:12421:9)
        at workLoop (http://localhost:3000/_next/1510152164727/commons.js:12693:13)
        at HTMLUnknownElement.callCallback (http://localhost:3000/_next/1510152164727/commons.js:1305:14)
    

    https://github.com/ronihcohen/frappe-charts-next-example

    Frappé Charts version:

    ^0.0.4

    opened by ronihcohen 9
  • [v.1.0.0] Release

    [v.1.0.0] Release

    Following up on #93. Some new features (as listed at https://frappe.github.io/charts) include:

    • Mixed type axis datasets
    • Stacked bar charts
    • Value over data points
    • Y Markers and regions
    • Dot size, Bar space size, and other options
    • Legend for axis charts

    The X axis is static, unlike the scaled Y axis. We'll incorporate time scaling soon :)

    API Change

    Chart options no longer incorporate the parent, it is instead the first parameter passed in creation, options being second:

    const chart = new Chart("#chart", { // or a DOM element
        title: "My Awesome Chart",
        data: data,
        type: 'bar',
        height: 250,
        colors: ['#7cd6fd', '#743ee2']
    })
    

    As this was a rewrite, I'll be now looking to incorporate existing PRs and issues in the meantime.

    Update 
    opened by pratu16x7 8
  • Pie chart display issue.

    Pie chart display issue.

    Expected Behaviour

    Pie chart was expected as a circle.

    Actual Behaviour

    Pie chart will be out of shape when one of the values is over 50%.

    Steps to Reproduce:

    NOTE: Add a GIF/Screenshot if required. 2018-01-02 16 20 13 Frappé Charts version: v0.0.7

    opened by vampuke 8
  • add js/charts/BaseChart - unbind_window_events

    add js/charts/BaseChart - unbind_window_events

    When we use virtualdom like snabbdom for exemple, We need to unbind window events at each destroy hook.

    This PR add an unbind_window_events at BaseChart.

    opened by FlorianBELLAZOUZ 8
  • Add custom legend for Heatmap chart.

    Add custom legend for Heatmap chart.

    Explanation About What Code Achieves:

    Allows to pass an optional parameter "legend" to Heatmap chart with own starting values and colors. Remove logic to use 2nd color if the value is bigger than the starting number for the 1st color. Therefore, use "legend" parameter in docs example as it supposed to highlight 1st commit, even though the distribution calculates starting number as 1.25 (which does not highlight 1st commit).

    Screenshots/GIFs:

    Example in docs.

    Steps To Test:

    Pass your own legend. Look at the example in the docs with and without passing "legend" parameter.

    TODOs:

    None

    opened by IDDT 8
  • [UPDATE] Development Progress

    [UPDATE] Development Progress

    So we've been receiving a lot of feature requests lately. I discovered however, that the components in the current implementation aren’t sufficiently decoupled to allow for easy extensibility. Here’s what currently happens (as we'd expect from a functional program): Step 1: make_components() makes groups for every component required. Step 2: draw() renders the svgs for all them Step 3: At some further point in time when values are updated, run_animation() follows a similar pattern.

    This came out of the project's origins and incremental feature updates. But UI in general is better describable with OOP. I've been trying out some restructuring; we could instead go for some initial registering for any chart component like so (ChartComponent implements a component's properties): screen shot 2017-12-08 at 10 15 43 pm copy

    Then BaseChart could just follow a life-cycle. That’d mean every component will know what it has to do, without the chart needing to bother: screen shot 2017-12-08 at 10 20 03 pm

    Here's some of the stuff I was able to add without much effort (more on the way):

    Mixed charts:

    screen shot 2017-12-05 at 5 19 02 am

    Multiple Axis:

    screen shot 2017-12-08 at 9 55 42 pm

    Most of the logic has now been transferred to utils, and no chart has more than 200-250 LOCs. As we look forward to test coverage, this’ll help the project to have predictable (and less) tests. And the contribution guidelines to have a well-defined code structure.

    These will constitute v0.1.0, which will be released by the end of this month.

    Apologies for the delay in updates, but I feel this detour was needed before any more feature additions. Haven't been able to catch up with the current issues and pull requests; will go ahead release a first cut with most of the fixes and merges by the in the coming week, tagging the in-progress ones in the meantime. Thanks for your patience :)

    Will keep posting updates, check this space. You can track the progress on the develop branch :D

    opened by pratu16x7 7
  • Implement measures and style overrides

    Implement measures and style overrides

    Apparently there's possible option the allow initial measures (such as padding) override on initialization. https://github.com/frappe/charts/blob/7adc904b08fbb45fb30372d9c6a3c3df43f80085/src/js/charts/BaseChart.js#L83

    Styling customization is the major flaw I see in this cute charting library. Allowing some svg parameters tune combined with some css variables override would help to overcome this limitation.

    opened by markusand 1
  • Donut chart vertical legend cut off

    Donut chart vertical legend cut off

    Expected Behaviour

    Charts is responsive and shows all legend entries.

    Actual Behaviour

    Vertical legend is cut off.

    image

    Steps to Reproduce:

    1. Set up donut chart with 3 labels (possibly inside grid) with layout such that legends are forced to be vertical
    2. Last legend item is cut off

    Frappé Charts version: 1.6.2 Codepen / Codesandbox: https://svelte.dev/repl/36767f0709f04f18967c7bb49a717a6f?version=3.42.6

    Might be related to #374, #308

    opened by aphilas 2
  • New features show/hide grid & cover entire space & grid colors

    New features show/hide grid & cover entire space & grid colors

    Explanation About What Code Achieves:
    • Added new features for grid modification - show /hide grid, grid line color, cover the width of container (ignore offsets).
    • Main changed classes/functions/files - BaseChart, AxisChart, ChartComponent, draw utilities.
    • Options are updated in readme file.
    Screenshots/GIFs:

    ex1 ex2

    Steps To Test:
    • Added code in docs/index.html, docs/index.js for testing.
    TODOs:
    • Originally designed and tested for line charts only. Bar graphs can be tested.
    opened by saurabh-git-dev 0
  • A Year-wise Heatmap

    A Year-wise Heatmap

    Hi, are you planning to develop a heatmap but instead of on a monthly basis, on an annual basis? Or is it already possible to do such a thing?

    Like this:

                Jan          Feb         Mar
    2011     |_|_|_|_|    |_|_|_|_|  |_|_|_|_|_| ...    ~52 squares (tot weeks per year)
    2012     |_|_|_|_|    |_|_|_|_|  |_|_|_|_|_| ...
    2013     |_|_|_|_|_|  |_|_|_|    |_|_|_|_| ...
    

    Frappé Charts version: Heatmap

    Feature Request 
    opened by fiorins 1
  • Overlap of charts

    Overlap of charts

    2022-05-30 10 47 34

    Expected Behaviour

    If the values of charts are same, they are still both visible

    Actual Behaviour

    Charts are overlapped

    Steps to Reproduce:

    NOTE: Add a GIF/Screenshot if required.

    Frappé Charts version: Codepen / Codesandbox:

    to validate 
    opened by VerRaz 1
Releases(v1.6.3)
  • v1.6.3(Apr 27, 2022)

    Fixes:

    fix: rounding error in the y-axis when max less than 1 (https://github.com/frappe/charts/pull/352) fix: ignore local timezones when creating a heatmap (https://github.com/frappe/charts/pull/377)

    Source code(tar.gz)
    Source code(zip)
  • v1.6.1(Apr 18, 2021)

  • v1.6.0(Apr 11, 2021)

  • v1.5.8(Mar 11, 2021)

    Fixes

    https://github.com/frappe/charts/pull/330: Render legend after update https://github.com/frappe/charts/pull/325: Fix ReactJS TypeError

    Deps

    https://github.com/frappe/charts/pull/331: bump handlebars from 4.1.2 to 4.7.7

    Source code(tar.gz)
    Source code(zip)
  • v1.5.6(Dec 22, 2020)

  • v1.5.5(Dec 14, 2020)

  • 1.5.4(Nov 30, 2020)

  • 1.5.3(Nov 5, 2020)

    Fix

    • formatters not being applied in aggregation chart (https://github.com/frappe/charts/pull/309)
    • reverse array when maxValue < absMinValue (#306)
    • rounding issues in aggregation chart legends (https://github.com/frappe/charts/commit/d1123786cb3267256aad2866fad65cbd3412d16f)
    Source code(tar.gz)
    Source code(zip)
  • v1.5.2(Jul 8, 2020)

  • v1.5.1(Jun 30, 2020)

    Fix

    Fixed attribute errors when the chart is hidden. https://github.com/frappe/charts/commit/d3eabea83612c1f8549826d3a6c6798abab424a3

    Related Issues: https://github.com/frappe/charts/issues/295, https://github.com/frappe/charts/issues/174

    Source code(tar.gz)
    Source code(zip)
  • v1.5.0(Jun 3, 2020)

    Refactor

    1. truncate legends #288

    Much cleaner truncate legends, it is enabled by default, and the max width is set automatically for aggregate based charts

    Source code(tar.gz)
    Source code(zip)
  • v1.4.0(May 9, 2020)

  • 1.3.2(Apr 30, 2020)

  • v1.3.1(Apr 30, 2020)

  • 1.3.0(Sep 22, 2019)

    Feats

    • Allow disabling of animation (https://github.com/frappe/charts/pull/241)
    • Added spline to lineOptions to create spline graph (https://github.com/frappe/charts/pull/240). Contributed by @nxplus

    Fixes

    • Fix issues with event listeners (https://github.com/frappe/charts/commit/2382c4d27387af83ddef448c5402ceaa2e37f447, https://github.com/frappe/charts/commit/92674f94f19e4c784d501125f7c454e246f9d1b9)
    • Warnings for empty arrays (https://github.com/frappe/charts/pull/203). Contributed by @andreasvirkus
    Source code(tar.gz)
    Source code(zip)
  • 1.2.4(Jul 30, 2019)

    Feats

    • Added truncateLegends option to config to allow truncating of legends (https://github.com/frappe/charts/pull/234)
    • Added shortenYAxisNumbers option to axisOptions to truncate large numbers.
    • Labels will auto fit width of the wrapper for Aggregation charts (https://github.com/frappe/charts/pull/232)

    Fixes

    • Fix donut chart large arc bug (https://github.com/frappe/charts/issues/233)
    • Full circle not rendering for Pie chart and Donut chart (https://github.com/frappe/charts/pull/237)
    • Default strokewidth issue (https://github.com/frappe/charts/pull/229)
    • Set minimum bar height to zero, contributed by @Alchez (https://github.com/frappe/charts/pull/209)

    Other

    • Remove stray fs package from package.json (https://github.com/frappe/charts/issues/230)
    Source code(tar.gz)
    Source code(zip)
  • 1.2.3(Jul 3, 2019)

    Fixes

    • Fixed default stroke width for line charts
    • Labels will now auto-fit the chart width
    • Fix legend spacing for aggregation based charts
    Source code(tar.gz)
    Source code(zip)
  • 1.2.0(May 24, 2019)

    Releasing version v1.2.0. These following are the changes made to the library in the past one month.

    Feats

    • Donut Charts 🎉, Contributed by @ratnajeetshyamkunwar (https://github.com/frappe/charts/pull/221)

    Fixes

    • fix: node-sass xcode rebuild issue (https://github.com/frappe/charts/pull/225)
    • Fix piechart large arc (https://github.com/frappe/charts/pull/181)

    Docs

    • Updated docs for es-modules like VueJS to work (import correction and including css) #206 https://github.com/frappe/charts/pull/206
    Source code(tar.gz)
    Source code(zip)
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching ch

Joe Walnes 2.2k Dec 13, 2022
Simple responsive charts

Big welcome by the Chartist Guy Checkout the documentation site at http://gionkunz.github.io/chartist-js/ Checkout this lightning talk that gives you

Gion Kunz 26 Dec 30, 2022
Progressive pie, donut, bar and line charts

Peity Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini <svg> pie, donut, line or bar chart. Basic Usage HTM

Ben Pickles 4.2k Jan 1, 2023
📊 Interactive JavaScript Charts built on SVG

A modern JavaScript charting library to build interactive charts and visualizations with simple API. Our Partner ApexCharts is now a partner of Fusion

ApexCharts 12.1k Jan 3, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
The JavaScript library for modern SVG graphics.

Snap.svg · A JavaScript SVG library for the modern web. Learn more at snapsvg.io. Follow us on Twitter. Install Bower - bower install snap.svg npm - n

Adobe Web Platform 13.6k Dec 30, 2022
Simple HTML5 Charts using the tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Chart.js 59.4k Jan 7, 2023
Simple package to facilitate and automate the use of charts in Laravel 5.x using Chartjs v2 library

laravel-chartjs - Chart.js v2 wrapper for Laravel 5.x Simple package to facilitate and automate the use of charts in Laravel 5.x using the Chart.js v2

Felix Costa 473 Dec 15, 2022
A simple ember component for adding Charts

Ember Chart This Ember CLI addon is a simple wrapper for ChartJS (v2.9). Compatibility Ember.js v3.12 or above Ember CLI v2.13 or above Node.js v10 or

Ahmed Omran 136 Oct 24, 2022
A simple script for pure javascript charts.

MK Charts A simple pure Javascript for displaying circle charts. Demo: https://mkirschen.de/mk-scripts/mk-charts/ Circle charts To insert a chart all

Marcus Kirschen 6 Dec 14, 2022
📊 A highly interactive data-driven visualization grammar for statistical charts.

English | 简体中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website • Tutorial Docs • Blog • G2Plot G2 is a visua

AntV team 11.5k Dec 30, 2022
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Northwoods Software Corporation 6.6k Dec 30, 2022
Attractive JavaScript charts for jQuery

flot About flot is a JavaScript plotting library for engineering and scientific applications derived from Flot: http://www.flotcharts.org/ Take a look

Flot 5.9k Dec 22, 2022
Charts for Raphaël

g.Raphaël - Official charting plugin for Raphaël For more information, see: http://g.raphaeljs.com/ Changelog v0.51 Fixed issues with piechart related

Dmitry Baranovskiy 1.5k Dec 31, 2022
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser

jQuery Sparklines This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line

Gareth Watts 1.2k Jan 4, 2023
Awesome charts for AngularJS.

n3-line-chart v2 n3-line-chart is an easy-to-use JavaScript library for creating beautiful charts in AngularJS applications and it is built on top of

null 1.2k Dec 7, 2022
Create beautiful charts with one line of JavaScript

Chartkick.js Create beautiful charts with one line of JavaScript See it in action Supports Chart.js, Google Charts, and Highcharts Also available for

Andrew Kane 1.2k Jan 2, 2023
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022