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.

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)

Framework support

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

Built With

• React.js
• JavaScript
• css

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;

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;

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>
     );
   }

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.

Options

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

Browser Support

Native support

• Chrome
• Safari
• FireFox

License

MIT

Developed by Karunaaharan Bavaram

Copyright

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