npm package: @kiwibit/chart
Description: This project is an Angular library designed to simplify the process of 2D charts generation.
Latest version: 21.0.0

# Getting Started

This project is an Angular library designed to simplify the process of 2D charts generation.

### Latest versions @npm:

> **v19.x** for Angular >= **19.x**
> 
> **v18.x** for Angular >= **18.x**
> 
> **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:

```properties
npm install @kiwibit/chart
``` 

# Usage

- Firstly, import KiwiChartComponent (it'a a standalone component) in your app module (or any other proper Angular module).
  
    ```typescript
    import { KiwiChartComponent } from '@kiwibit/chart';

    @NgModule({
        imports: [
            KiwiChartComponent
        ],
    })
    export class AppModule {}
    ```
- Then use kiwi-chart in your Angular component:
  
  ```html
  <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

## [19.0.0] - 2025-01-23

### Added

- Upgrade to Angular 19.

## [18.0.2] - 2024-12-02

### Fixed

- Aligned with previous code 

## [18.0.0] - 2024-11-29

### Added

- Upgrade to Angular 18.

## [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).