Chartjs-Alter angular js chart wrapper to support drawing custom lines

by

1👍

✅

No need to modify the core ChartJS library.

You can accomplish that using a ChartJS plugin called – chartjs-plugin-annotation.

DEMO

var app = angular.module('app', ['chart.js']);

app.controller("LineCtrl", function($scope) {
   $scope.labels = ["2017-03-09", "2017-03-10", "2017-03-11", "2017-03-12", "2017-03-13", "2017-03-14"];
   $scope.colors = ['#07C'];
   $scope.data = [
      [3, 2, 5, 1, 4, 2]
   ];
   $scope.options = {
      legend: {
         display: true
      },
      scales: {
         xAxes: [{
            type: 'time'
         }]
      },
      annotation: {
         annotations: [{
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-0',
            value: '2017-03-11',
            borderColor: 'red',
            borderWidth: 2
         }]
      }
   }
   $scope.datasetOverride = [{
      label: 'TIME',
      fill: false
   }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.min.js"></script>
<div ng-app="app" ng-controller="LineCtrl">
   <canvas id="line" class="chart chart-line" chart-data="data" chart-colors="colors" chart-labels="labels" chart-options="options" chart-dataset-override="datasetOverride"></canvas>
</div>

To learn more about this plugin and its use-cases, refer here.

0👍

I had a similar issue : I used a drawing library to make hierarchical charts (called mermaidJS) and needed to make custom adjustments.

What I did was :

  • Inspect the concerned canvas / SVG / HTML tag (here let’s say its a canvas)
  • Give it an Element reference :

So that I could do 

<canvas #myCanvas id="mermaidJS"></canvas>
// Component
@ViewChild('myCanvas'): ElementRef;
  • Do what I had to do by trying (in your case, it would be to find the axis you want with native JS, and draw a line on it)

I hope this can help you, because really that’s all I can do with such information …

Leave a comment