ng2-charts-boundary-lines

Chart and edit boundary lines for Angular based on Chart.js (with zoom plugin and dragdata plugin ) and ng2-charts.

• Charts measurements and boundary lines as time series
• Filters time series
  • Filters x-values by a certain amount of maximum ticks
  • Aggregates data in between ticks according to different strategies (e.g., show maximum value in between ticks)
• Change boundary lines
  • Drag data points of boundary lines to change them
  • Instantly emits changed values
  • Interpolates data between ticks linearly
• Zoom and pan
  • Zoom and pan using your mouse or finger
  • Filters data by start and end time on the x-axis to only render necessary data

Usage

Installation

1. You can install ng2-charts-boundary-lines using npm

npm install @perguard/ng2-charts-boundary-lines --save

2. You need to install Chart.js, ng2-charts`, and some plugins in your application as they are peer dependencies

npm install chart.js --save
npm install chartjs-plugin-annotation --save
npm install chartjs-plugin-dragdata --save
npm install chartjs-plugin-zoom --save
npm install hammerjs --save
npm install help --save
npm install ng2-charts --save

Integration

import { Ng2ChartsBoundaryLinesModule } from 'ng2-charts-boundary-lines';

// In your app's module:
imports: [
   Ng2ChartsBoundaryLinesModule
]

Usage

<ng2-charts-boundary-lines
  [traces]="traces"              
  [(lowerBaseline)]="lowerBaseline"
  [(upperBaseline)]="upperBaseline"
  [maxDataPoints]="48"           
  [width]=1000                   
  [height]=800>                  
</ng2-charts-boundary-lines>

Input values

| Name | Type | Description | Required | Default | | --------------- | ------------------------------------------------------------ | ------------------ | -------- | --------- | | traces | ChartPoint[] | Actual measuements | Yes | undefined | | lowerBaseline | ChartPoint[] | Lower boundaries | Yes | undefined | | upperBaseline | ChartPoint[] | Upper boundaries | Yes | undefined | | maxDataPoints | number | Amount of ticks | No | 48 | | width | number | Width of chart | No | undefined | | height | number | Height of chart | No | undefined |

Output values

| Name | Type | Description | | --------------------- | ------------------------------------------------------------ | ---------------- | | lowerBaselineChange | ChartPoint[] | Adapted lower boundaries | | upperBaselineChange | ChartPoint[] | Adapted upper boundaries |

Troubleshooting

Please use GitHub Issues to report bugs and feature requests.

Thank you!

License

The MIT License (see the LICENSE file for the full text)