frappe-charts

WebJar for frappe-charts

License

License

MIT
Categories

Categories

Charts User Interface
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

frappe-charts
Last Version

Last Version

0.0.6
Release Date

Release Date

Type

Type

jar
Description

Description

frappe-charts
WebJar for frappe-charts
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/frappe/charts

Download frappe-charts

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/frappe-charts/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>frappe-charts</artifactId>
    <version>0.0.6</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/frappe-charts/
implementation 'org.webjars.npm:frappe-charts:0.0.6'
// https://jarcasting.com/artifacts/org.webjars.npm/frappe-charts/
implementation ("org.webjars.npm:frappe-charts:0.0.6")
'org.webjars.npm:frappe-charts:jar:0.0.6'
<dependency org="org.webjars.npm" name="frappe-charts" rev="0.0.6">
  <artifact name="frappe-charts" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='frappe-charts', version='0.0.6')
)
libraryDependencies += "org.webjars.npm" % "frappe-charts" % "0.0.6"
[org.webjars.npm/frappe-charts "0.0.6"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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", 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

License

This repository has been released under the MIT License


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

org.webjars.npm

Frappe

Versions

Version
0.0.6
0.0.5
0.0.4