Image-chart NPM

About Project

This is different kind of graph representation of UI kit. It's fully worked on react Js. In here you can simply plot graph with binary values. Now package are 3 different kind of image is using, many images are adding soon. You can simply change back, text color attributes.

Features

Available Image Types building map map2 Others are available soon

Highly customizable
Very easy to implement
Resolution independent
Uses css for smooth animations on riced time
Works in all modern browsers, Chrome, FireFox, Safari
Simply compare ratio
No need other front-end css stuff
Dark, light modes available and text back colors are editable
You can use any color theme combination
Now map and building template are available (other templates are under developed)

Framework support

React JS (no dependencies)

Built With

Get started

Installation

This is a Node.js module available through the npm registry.

Before installing, download and install Node.js. Node.js 0.10 or higher is required.

Installation is done using the npm install command:

Using npm:

$ npm i image-chart

Using yarn:

$ yarn add image-chart

Usage

sample - 01

import {ImageChart} from "image-chart";

function App() {
  return (
    <ImageChart name="chart" title="Occupants count"  total={1500} value={500} />
  );
}

export default App;

sample - 02 (Dark Mode)

import {ImageChart} from "image-chart";

function App() {
  return (
      <ImageChart  name="chart" title="Occupants count " dark={true} total={1500} value={500} />
  );
}

export default App;

sample - 03 (change image type)

import {ImageChart} from "image-chart";

function App() {
  return (
    <ImageChart   name="chart" title="Occupants count " type="map" cardTextColor="#fff" total={1500} value={500} />
  );
}

export default App;

sample - 04 (use other props you can read more in option part)

import {ImageChart} from "image-chart";

function App() {
  return (
    <ImageChart cardBackColor="#f8c7ff" lineColor="#fa2eec" highLightColor="#fa2eec" cardTextColor="#fff"  name="chart" type="map"  title="Occupancy"  total={1200} value={420} />
  );
}

export default App;