Alter angular js chart wrapper to support drawing custom lines

Question

Basically, I try to unpick the angular wrapper of chartjs to make or expose a function to draw on the already created canvas.

I have a customer requirement for drawing a single vertical line that will be used to highlight the current time. Crazy, I know.

I got the angular wrapper integrated into my current application and was hoping to use the chart helper canvas which contains a function to draw a point - drawPoint: function(ctx, style, radius, x, y).. turns out that's not accessible.. I'm digging about in core controller but can't find anything of use..

Does anyone know if what i'm doing is possible without editing chartjs?

Cheers

XunChao

Answer 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.

Answer 2

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 ...