https://github.com/vasturiano/proportions-chart
A one-dimensional proportional chart web component for visualizing categorical data
https://github.com/vasturiano/proportions-chart
categorical-data chart d3js data-visualization proportions
Last synced: 8 months ago
JSON representation
A one-dimensional proportional chart web component for visualizing categorical data
- Host: GitHub
- URL: https://github.com/vasturiano/proportions-chart
- Owner: vasturiano
- License: mit
- Created: 2019-06-20T03:11:25.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-02-25T17:25:59.000Z (over 1 year ago)
- Last Synced: 2025-09-22T09:27:05.366Z (9 months ago)
- Topics: categorical-data, chart, d3js, data-visualization, proportions
- Language: JavaScript
- Homepage: https://vasturiano.github.io/proportions-chart/example/basic/
- Size: 346 KB
- Stars: 11
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Proportions Chart
=================
[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
An interactive one-dimensional proportions chart for representing categorical data.
## Quick start
```js
import ProportionsChart from 'proportions-chart';
```
or using a *script* tag
```html
```
then
```js
const myChart = ProportionsChart();
myChart()
.data();
```
## API reference
| Method | Description | Default |
| --- | --- | :--: |
| data([array]) | Getter/setter for the chart data, as an array of series objects, each representing a chart segment. | `[]` |
| width([number]) | Getter/setter for the chart width in px. | *<window width>* |
| height([number]) | Getter/setter for the chart height in px. | *<window height>* |
| label([string or fn]) | Getter/setter for a series object label accessor, used to display labels on the segments and their tooltips. | `name` |
| size([string or fn]) | Getter/setter for a series object size accessor, used to compute the length of the segments. | `value` |
| color([string or fn]) | Getter/setter for a series object color accessor, used to color the segments. | grey |
| sort([fn]) | Getter/setter for the compare method used to sort the series. A value of `null` (*default*) maintains the existing order found in the input data structure. This method receives two arguments representing two series objects and expects a numeric return value (`-1`, `0` or `1`) indicating the order. For example, to order segments by size, use: `(a, b) => b.size - a.size`. | *<existing order*> |
| showLabels([boolean]) | Getter/setter for whether to show labels in the segments. Regardless of this setting, labels too large to fit within a segment's boundaries are automatically hidden. | `true` |
| tooltipContent([fn]) | Getter/setter for a series object tooltip content accessor function. Use this to specify extra content in each of the segment's tooltips in addition to the series name that's included by default. | *<value (%)*> |
| onHover([fn]) | Callback function for mouse hover events. The series object (or `null` if hovering outside the chart area) and the event object are included as arguments `onHover(series, event)`. | |
| onClick([fn]) | Callback function for click events. The series object and the event object are included as arguments `onClick(series, event)`. | |
| onRightClick([fn]) | Callback function for right-click events. The series object and the event object are included as arguments `onRightClick(series, event)`. A falsy value (default) will fallback to the default browser behaviour, which is to open the context menu. | |
[npm-img]: https://img.shields.io/npm/v/proportions-chart
[npm-url]: https://npmjs.org/package/proportions-chart
[build-size-img]: https://img.shields.io/bundlephobia/minzip/proportions-chart
[build-size-url]: https://bundlephobia.com/result?p=proportions-chart
[npm-downloads-img]: https://img.shields.io/npm/dt/proportions-chart
[npm-downloads-url]: https://www.npmtrends.com/proportions-chart