https://github.com/kis/chartify

📊 📈 📉 React.js plugin for building charts using CSS
https://github.com/kis/chartify

barchart chart charts css-chart linechart react react-plugins visualization

Last synced: about 20 hours ago
JSON representation

📊 📈 📉 React.js plugin for building charts using CSS

• Host: GitHub
• URL: https://github.com/kis/chartify
• Owner: kis
• License: mit
• Created: 2016-11-12T21:23:56.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-02-28T21:16:04.000Z (over 1 year ago)
• Last Synced: 2024-09-15T05:48:29.427Z (2 months ago)
• Topics: barchart, chart, charts, css-chart, linechart, react, react-plugins, visualization
• Language: TypeScript
• Homepage: https://chartify-213721.web.app/
• Size: 24.2 MB
• Stars: 692
• Watchers: 9
• Forks: 23
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Contributing: docs/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: docs/CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-react-cn - chartify - React plugin for building charts using CSS (Uncategorized / Uncategorized)
• awesome-react - Chartify - React plugin for building charts using CSS.
• awesome-learning-resources - chartify - React plugin for building charts using CSS (Uncategorized / Uncategorized)
• awesome-react - chartify - React.js plugin for building charts using CSS ` 📝 a year ago` (React [🔝](#readme))

README

        
Chartify


React.js plugin for building charts using CSS.




	

	

	

	

    



![alt text](https://raw.githubusercontent.com/kis/chartify/master/blocks.jpg)

The source for this module is in the [main repo](https://github.com/kis/chartify).  

Example app is [here](https://github.com/kis/chartify/tree/master/example).  

Backend service for the example app is [here](https://github.com/kis/chartify-service).  

npm package is [here](https://www.npmjs.com/package/chartify).

Install




    

        

    



```

npm install chartify --save-dev

```

Getting started


```javascript

import Chartify from 'chartify';

const data = [{

    xValue: '20.11.2016',

    yValue: 5,

    title: '007 Spectre'

}];

const config = {

    theme: 'blue',

    width: 50,			      

    height: 10,		

    boxSize: 20,

    isLineChart: false,

    bordered: false

};

```

Passing props


Data prop is a dataset that should be an array of objects:    

```[{ xValue: '12.03.2019', yValue: 8, title: 'men in black' }]```

Keys are required and types are:  

```{ xValue: string, yValue: number, title: string }```

Container prop is a class that will be added to the chart container element. This is important in case you have more than one chart on your page.   

Config prop is an object with properties:  

theme:string - is color scheme of the chart, "default", "blue", "grey", "white" etc.


width:number - is the length of the data array by X-axis.


height:number - is the length of the data by Y-axis.


boxSize:number - is size of each box in pixels.


isLineChart:boolean - is param that determines if this is a line-chart.


bordered:boolean - is param that determines if each box has white borders.
  

License


The MIT License (MIT) Copyright (c) 2020