Giter VIP home page Giter VIP logo

c3-react's Introduction

c3-react

c3-react is a reusable react component for c3 charts demo

How to install

npm install c3-react

How to use

const C3Chart = require("./C3Chart.jsx");
  • In parnet component
<C3Chart data={data} type={type} options={options}/>
  • data example:
let data = [
  {
    key: "dataSource1"
    values: [
      {label: "A", value: 3},
      {label: "B", value: 4}
    ]
  },
  {
    key: "dataSource2"
    values: [
      {label: "X", value: 7},
      {label: "Y", value: 8}
    ]
  }
]
  • supported types
let type = "bar" // {"line","bar","pie", "multiBar","lineBar"}
  • options example
let options = {
  padding: {
    top: 20,
    bottom: 20,
    left: 40,
    right: 10
  },
  size: {
    width: 800,
    height: 600
  },
  subchart: true,
  zoom: true,
  grid: {
    x: false,
    y: true
  },
  labels: true,
  axisLabel: {
    x: "product",
    y: "quantity"
  },
  onClick: function(d) {
    let categories = this.categories(); //c3 function, get categorical labels
    console.log(d);
    console.log("you clicked {" + d.name + ": " + categories[d.x] + ": " + d.value + "}");
  }
};

How to run examples

$ cd c3-react
$ npm install 
$ npm run dev

Release Note

  • 0.1.6 - provide compiled es5 module

Dependency

License

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.