Roku-charts NPM

Roku Charts

Roku Charts is a lightweight chart library that provides a simple and flexible way to create charts in your web applications. It is built using D3.js and leverages the power of SVG to create high-quality, interactive charts.

With Roku Charts, you can create a wide variety of chart types, including bar charts, calendar charts, and more (in the future). The library provides a simple and intuitive API for configuring and customizing your charts, making it easy to create charts that meet your exact requirements.

It is designed to be lightweight. This means that it should not slow down the loading speed of the page and can provide a smooth and responsive user experience.

Roku Charts also supports scaling with the window, which means that it can automatically adjust the size and layout of the chart to fit the available space. This can be particularly useful for creating responsive and adaptive user interfaces.

In addition, Roku Charts provides support for smooth animations, which can be used to enhance the visual appeal and interactivity of your charts. Animations can be used to highlight data points, provide context for changes over time, and create a more engaging and dynamic user experience.

Installation

You can use any package manager to install this package.

Please note that you should also install d3, as it is a peer dependency.

pnpm install roku-charts d3

# or
npm install roku-charts d3

# or
yarn add roku-charts d3

Alternatively, if you want to use the UMD build, you can use Unpkg:

<script src="https://unpkg.com/d3"></script>
<script src="https://unpkg.com/roku-charts"></script>

Or, you can use Jsdelivr:

<script src="https://cdn.jsdelivr.net/npm/d3"></script>
<script src="https://cdn.jsdelivr.net/npm/roku-charts"></script>

Usage

import { type Datum } from './interfaces'
import { RokuBar } from './RokuBar'

RokuBar
  .New('#test-1')
  .setData([{ id: '3', value: 4 }, { id: 'bbb', value: 1 }, { id: 'ccc', value: 3 }, { id: 'ddd', value: 5 }])
  .draw()