JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<link rel="stylesheet" href="https://jtblin.github.io/angular-chart.js/dist/angular-chart.css">
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<body ng-app="test">
<div ng-controller="TestCtrl">
<canvas class="chart chart-linebis" chart-data="data"
chart-labels="labels" chart-legend="true" chart-series="series"></canvas>
</div>
</body>
JavaScript
// Extend chart.js with a new type of chart
Chart.types.Line.extend({
name: "LineWithLine",
initialize: function () {
Chart.types.Line.prototype.initialize.apply(this, arguments);
},
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
// Needs to be set with angular-chart options
var lineAtIndex = 2;
var point = this.datasets[0].points[lineAtIndex]
var scale = this.scale
console.log(this);
// draw line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(scale.startPoint+12, point.y);
this.chart.ctx.strokeStyle = '#ff0000';
this.chart.ctx.lineTo(this.chart.width, point.y);
this.chart.ctx.stroke();
// write TODAY
this.chart.ctx.textAlign = 'center';
this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y+10);
}
});
// angular-chart.js source code
(function (factory) {
'use strict';
if (typeof exports === 'object') {
// Node/CommonJS
module.exports = factory(
typeof angular !== 'undefined' ? angular : require('angular'),
typeof Chart !== 'undefined' ? Chart : require('chart.js'));
} else if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['angular', 'chart'], factory);
} else {
// Browser globals
factory(angular, Chart);
}
}(function (angular, Chart) {
'use strict';
Chart.defaults.global.responsive = true;
Chart.defaults.global.multiTooltipTemplate = '<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>';
Chart.defaults.global.colours = [
'#97BBCD', // blue
'#DCDCDC', // light grey
'#F7464A', // red
'#46BFBD', // green
'#FDB45C', // yellow
'#949FB1', // grey
'#4D5360' // dark grey
];
var usingExcanvas = typeof window.G_vmlCanvasManager === 'object' &&
window.G_vmlCanvasManager !== null &&
typeof...