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.

[1.0.2] - 2022-03-28

Changed

• scrollToZoom and clickToAddPoint are now optional and by default set to false.

Fixed

• Rounded number to 3 decimals in the point tooltip.

Removed

• Removed restore option in the toolbox.

[1.0.1] - 2022-03-28

Added

• Added property in the Trace model to make a Trace not selected in the legend by default.

Changed

• Changed Unit of Measure format in the Axes labels.
• Changed default symbol of a Point.

[1.0.0] - 2022-03-25

Added

• First release of the kiwi-chart (version 1.0.0).