npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

chartam.io

v1.4.0

Published

This package provides a comprehensive chart library built on top of amCharts 5, a powerful and flexible JavaScript charting library that supports a wide range of chart types and data formats.

Downloads

42

Readme

chartam.io

NPM React GitHub LinkedIn Trello BuyMeACoffee Github-sponsors Licence downloads

chartam.io Banner

This package provides a comprehensive chart library built on top of amCharts 5, a powerful and flexible React charting library that supports a wide range of chart types and data formats.

With this library, you can easily create visually stunning and interactive charts for your web applications, dashboards, and reports. The library includes a variety of pre-built chart types, such as bar charts, line charts, scatter charts, and more, that can be customized to fit your specific needs.

The package is designed to be easy to use and integrate into your existing web development workflow. It comes with comprehensive documentation and examples to help you get started quickly.

Features:

  1. Wide range of chart types
  2. High-performance rendering
  3. Fully customizable styling
  4. Responsive and mobile-friendly design
  5. Cross-browser compatibility
  6. Comprehensive documentation and examples

Trello Trello

  1. You can post your chart requirements we can create for you new chart component if there's no component in library and also we can create you chart as per your reuirement.
  2. You can ask question in trello as well as.
  3. Write your thoughts about package in trello as well.

Buy me a coffee

BuyMeACoffee

Installation

Download node at nodejs.org and install it, if you haven't already.

npm install chartam.io --save

Usage

Install Package

# import specific chart
import { ColumnWithRolatedLabel } from "chartam.io";

<ColumnWithRolatedLabel
    chartId="ColumnWithRolatedLabel" // chartid will be unique
    width="1000px" // width
    height="500px" // height
    data={[
        {
            category: "India",
            value: 2025,
        },
        {
            category: "USA",
            value: 1882,
        }
        ]} // data
    setting={{
        xAxis: {
            label: {
              rotation: -90, // rotation
              paddingRight: 15, // padding right
            },
        },
        yAxis: {
            minValue: 100, // value for yaxis start point
            maxValue: 2500, // value for yaxis end point
        },
        columnSeries: {
            tooltipText: "{value} {category}", // JSON key names
            barcolor: "#6ed27a", // color code
          },
        }}
/>

Documentation

For more information on how to use Chartam.io, see the documentation.

Dependencies

  • amcharts: Programming library for all your data visualization needs.
  • lodash: Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.

Contributers

We welcome contributions from the community! If you find a bug, have a feature request, or would like to contribute code, please open an issue or pull request on our GitHub repository. GitHub

License

MIT Licence