chartify alternatives and similar libraries
Based on the "Chart" category.
Alternatively, view chartify alternatives based on common mentions on social networks and blogs.
-
victory
A collection of composable React components for building interactive data visualizations -
react-chartjs-2
React components for Chart.js, the most popular charting library -
react-sparklines
Beautiful and expressive Sparklines React component -
react-google-charts
A thin, typed, React wrapper over Google Charts Visualization and Charts API. -
react-timeseries-charts
Declarative and modular timeseries charting components for React -
rumble-charts
React components for building composable and flexible charts -
react-sigmajs
Lightweight React library for drawing network graphs built on top of SigmaJS -
d3-react-squared
Lightweight event system for (d3) charts and other components for ReactJS. -
react-micro-bar-chart
React component for micro bar-charts rendered with D3 -
Flowchart React
Lightweight flowchart & flowchart designer for React.js. -
JSCharting for React
Official JSCharting React Plugin & Examples -
essential js 2 charts
Beautiful and interactive charts & graphs for react.
Appwrite - The Open Source Firebase alternative introduces iOS support
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of chartify or a related project?
README
Chartify
React.js plugin for building charts using CSS.
The source for this module is in the main repo.
Example app is here.
Backend service for the example app is here.
npm package is here.
Install
npm install chartify --save-dev
Getting started
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
};
<Chartify
data={data}
container="films-container"
config={config}
/>
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
*Note that all licence references and agreements mentioned in the chartify README section above
are relevant to that project's source code only.