image-chart

Simply use Image Chart to plot your ratio percentages (Differently plot something)
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About Project
2. Features
3. Framework support
4. Built With
5. Get Started
   • Installation
6. Usages
7. Options
8. Browser Support
9. License

About Project

This is different kind of graph representation of UI kit. It's fully worked on react and Next 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.

(back to top)

Features

Available Image Types building map map2 mountain 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)

(back to top)

Framework support

• React JS (v17, v18, v19+)
• Next.js (v13+ with App Router, requires "use client"; directive)

(back to top)

Built With

• React.js
• JavaScript
• css

(back to top)

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

(back to top)

---

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;

sample - 05 (Using your own image)

To use your own custom image, set the type prop to "my" and pass the image source to the image prop. You can import images directly into your component or pass a URL.

For sample images that you can use, or to see the structure of the default images, you can check the image directory in the repository: https://github.com/kbram/image-chart/tree/master/src/components/ImageChart/image

import { ImageChart } from "image-chart";
import myCustomImage from "./path/to/your/image.png"; // Example: import your image

function App() {
  return (
    <ImageChart
      name="chart"
      title="Custom Image Chart"
      type="my"
      image={myCustomImage} // Pass the imported image or a URL string
      total={1000}
      value={750}
      dark={false}
      cardTextColor="#333"
    />
  );
}

export default App;

(back to top)

---

Next.js Usage

To use image-chart in a Next.js project (using the App Router), you need to ensure the component is treated as a Client Component, as it's a React Class Component.

1. Install the package:

   npm install image-chart
   # or
   yarn add image-chart

2. Import and use the component: In your Next.js page or component file (e.g., app/your-page/page.tsx), add the "use client"; directive at the top of the file.

   "use client"; // Add this at the top
   
   import { ImageChart } from "image-chart";
   import myCustomImage from "../path/to/your/image.png"; // If using type="my"
   
   export default function MyPage() {
     return (
       <div>
         <ImageChart
           name="nextJsChart"
           title="Chart in Next.js"
           type="my"
           image={myCustomImage}
           total={100}
           value={60}
         />
       </div>
     );
   }

(back to top)

---

TypeScript Support

image-chart version 0.1.4 and later includes built-in type definitions (index.d.ts). This means you get out-of-the-box TypeScript support, including type checking and autocompletion for props, when using the component in your TypeScript projects.

No additional @types/image-chart package or manual declaration files are needed.

(back to top)

---

Options

You can pass these options to the initialize function to set a custom look and feel for the plugin.

Property (Type)	Default	Type	Description
name	null	string	The name is must be compulsory attribute. If you not put this multiple component can't use in same time. this is for identification of our component
title	null	string	This is for displaying title of component
total	null	int	This attributes must be compulsory. This is for max limit number of chart
value	null	int	This attributes must be compulsory. This is for plot value of chart
fontStyle	Montserrat, sans-serif	string	You can change whole component font style here
type	building	string	This is for back image type define. Available types are `building`, `map`, `map2`, `mountain`. Set to `my` to use a custom image via the `image` prop.
image	null	string / object	Used when `type` is set to `my`. Pass the imported image object or a URL string for your custom image.
dark	false	boolean	This is boolean attribute , It's true value is decided dark mode or not.
cardBackColor	Dark:#242424 Light:#ededed	string	This is for background color of the component
cardTextColor	Dark:#343a40 Light:#343a40	string	This is for text color of the component
cardSideTextColor	Dark:#e2e3e4 Light:#343a40	string	This is for axis text color of the component
imageCardColorLine	#3cb4e7	string	This is for chart line color
highLightColor	#3cb4e7	string	This is for chart back highlight color

(back to top)

Browser Support

Native support

• Chrome
• Safari
• FireFox

(back to top)

License

MIT

Developed by Karunaaharan Bavaram

Copyright

Copyright (c) 2022 Karunaaharan Bavaram, contributors. Released under the MIT, GPL licenses

(back to top)