@kiwibit/chart NPM

Getting Started

kiwi-chart is an Angular library designed to simplify the process of 2D charts generation.

Latest versions @npm:

v17.x for Angular >= 17.x
v16.x for Angular >= 16.x
v15.x for Angular >= 15.x
v14.x for Angular >= 14.x
v1.0.x for Angular <= 13.x

Installation

After creating a new Angular project simply run:

npm install @kiwibit/chart

Usage

Firstly, import KiwiChartModule in your app module (or any other proper Angular module).

import { KiwiChartModule } from '@kiwibit/chart';

@NgModule({
    imports: [
        KiwiChartModule
    ],
})
export class AppModule {}

Then use kiwi-chart in your Angular component:
```
<kiwi-chart></kiwi-chart>
```
The predefined height of the chart is 480px but it can be adjusted as preferred.

API

Name	Type	Default	Description
@Input chart	Chart		The chart object
@Input width	string	100%	The width of the canvas element
@Input height	string	480px	The height of the canvas element
@Input darkTheme	boolean	false	Whether to activate the Dark Theme
@Input darkThemeBackground	string		Background color for the Dark Theme
@Output (addPoint)	BasePoint		When clicking in the chart area, emits a BasePoint containing the coordinates. To be available it requires the flag "clickToAddPoint" in the Chart model set to true.
@Output (chartHover)	BasePoint		When hovering the chart area, emits a BasePoint containing the coordinates.

Latest Updates

17.0.1 - 2024-03-22

Added

Created a custom Angular directive to render the chart through the echarts library.

Changed

Replaced chart icons in the toolbox with Material Icons svgs.

Removed

Removed ngx-echarts dependency.

17.0.0 - 2024-03-21

Added

Upgrade to Angular 17.

16.0.0 - 2024-03-05

Added

Upgrade to Angular 16.

15.0.1 - 2022-11-30

Added

Added initial chart configuration if not passed as an input to the chart, in order to suppress the echarts warning.

15.0.0 - 2022-11-30

Added

Upgrade to Angular 15

14.0.0 - 2022-11-30

Added

Upgrade to Angular 14

1.0.13 - 2022-06-29

Added

Added "chartHover" Output property to emit the x and y coordinates when the cursor is hovering the chart area.
Added opacity property in the Trace model.

1.0.12 - 2022-06-14

Added

Added animation duration in the chart model (as optional).
Added maxAxesDecimals in the chart model (as optional).

Changed

Changed width of the chart in the grid option (to make the legend more readable when there's less space).

1.0.11 - 2022-06-09

Added

Added min and max values (as optional) for the x and y coordinate of the chart.

Changed

Minor fixes in the chart legend (increased width and changed inactive color for the dark theme).

1.0.10 - 2022-06-08

Added

Re-introduced manual change detection in the chart component.
Added two different "Add Point" icons for both the light and dark theme.

1.0.9 - 2022-05-31

Changed

Minor changes to the chart rendering logic.

Removed

Removed manual change detection in the chart component.

1.0.7 - 2022-05-31

Added

Added Dark Theme for the chart.
Added documentation for the Chart's models and component.

1.0.4 - 2022-03-30

Added

Added color property for the popints in a Trace.

1.0.3 - 2022-03-29

Added

Added a property in the Chart to choose if show the grid lines or not.

Changed

Changed the grid lines default color to #ccc.

Removed

Removed the automatic add of a point in the chart when clicking on add point control button. We just pass the data to father component which then decides whether to add a point or not.
Removed point name from tooltip.