How to use chart.js

Comprehensive chart.js code examples:

How to use chart.js.Tooltip:

670
671
672
673
674
675
676
677
678
679
680
        y: y / count,
    };
}
outlierPositioner.id = 'average';
outlierPositioner.register = () => {
    chart_js.Tooltip.positioners.average = outlierPositioner;
    return outlierPositioner;
};


function baseDefaults(keys) {

How to use chart.js.BarController:

841
842
843
844
845
846
847
848
849
850
        }
    }
}
BoxPlotController.id = 'boxplot';
BoxPlotController.defaults = helpers.merge({}, [
    chart_js.BarController.defaults,
    baseDefaults(boxOptionsKeys),
    {
        animations: {
            numbers: {

How to use chart.js.registry:

812
813
814
815
816
817
818
819
820
821
822
}


function patchController(type, config, controller, elements = [], scales = []) {
    chart_js.registry.addControllers(controller);
    if (Array.isArray(elements)) {
        chart_js.registry.addElements(...elements);
    }
    else {
        chart_js.registry.addElements(elements);
    }

How to use chart.js.Scale:

154
155
156
157
158
159
160
161
162
// Decorate Chart.Controller.buildScales() so we can decorate each scale
// instance's determineDataLimits() method
helpers.decorate(chartInstance, 'buildScales', function(previous) {
        previous();

        // Decorate Chart.Scale.determineDataLimits() so we can
        // check the annotation values and adjust the scale range
        Object.keys(chartInstance.scales).forEach(function(scaleId) {
                var scale = chartInstance.scales[scaleId];

How to use chart.js.Controller:

149
150
151
152
153
154
155
156
157
        };
}

var annotationPlugin = {
        beforeInit: function(chartInstance) {
                // Decorate Chart.Controller.buildScales() so we can decorate each scale
                // instance's determineDataLimits() method
                helpers.decorate(chartInstance, 'buildScales', function(previous) {
                        previous();

How to use chart.js.js:

128
129
130
131
132
133
134
135
136
137
require(['path/to/chartjs/dist/chart.min.js'], function(Chart){
    var myChart = new Chart(ctx, {...});
});
```

**Note:** in order to use the time scale, you need to make sure [one of the available date adapters](https://github.com/chartjs/awesome#adapters) and corresponding date library are fully loaded **after** requiring Chart.js. For this you can use nested requires:

```javascript
require(['chartjs'], function(Chart) {
    require(['moment'], function() {

How to use chart.js.Ticks:

448
449
450
451
452
453
454
455
456
457
var helpers = Chart.helpers;

var defaultConfig = {
	position: 'left',
	ticks: {
		callback: Chart.Ticks.formatters.linear
	}
};

var FinancialLinearScale = Chart.scaleService.getScaleConstructor('linear').extend({

How to use chart.js.Chart:

50
51
52
53
54
55
56
57
58
59
  },
};


const Cfd = (context, gameId) => {
  const chart = new Chart(context, config);

  const getHistory = (iterationId) => API(gameId).stats(iterationId)
    .then(response => response.json())
    .then(response => response.history);

How to use chart.js.scaleService:

452
453
454
455
456
457
458
459
460
461
	ticks: {
		callback: Chart.Ticks.formatters.linear
	}
};

var FinancialLinearScale = Chart.scaleService.getScaleConstructor('linear').extend({

	determineDataLimits: function() {
		var me = this;
		var chart = me.chart;

How to use chart.js.Element:

220
221
222
223
224
225
226
227
228
229
},{"./helpers.js":2,"./types/box.js":4,"./types/line.js":5,"chart.js":1}],4:[function(require,module,exports){
var helpers = require('../helpers.js');

// Box Annotation implementation
module.exports = function(Chart) {
        var BoxAnnotation = Chart.Element.extend({
                setRanges: function(options, chartInstance) {
                        var model = this._model = this._model || {};

                        var xScale = chartInstance.scales[options.xScaleID];

How to use chart.js.controllers:

16
17
18
19
20
21
22
23
24
25
Chart.defaults.candlestick.scales = {
	xAxes: [Object.assign({}, Chart.defaults.financial.scales.xAxes[0])],
	yAxes: [Object.assign({}, Chart.defaults.financial.scales.yAxes[0])]
};

Chart.controllers.candlestick = Chart.controllers.financial.extend({
	dataElementType: Chart.elements.Candlestick,

	updateElement: function(element, index, reset) {
		var me = this;

How to use chart.js.Annotation:

13
14
15
16
17
18
19
20
21
22
var chartHelpers = Chart.helpers;

var helpers = require('./helpers.js')(Chart);
var events = require('./events.js')(Chart);

var annotationTypes = Chart.Annotation.types;

function setAfterDataLimitsHook(axisOptions) {
	helpers.decorate(axisOptions, 'afterDataLimits', function(previous, scale) {
		if (previous) previous(scale);

How to use chart.js.elements:

17
18
19
20
21
22
23
24
25
26
	xAxes: [Object.assign({}, Chart.defaults.financial.scales.xAxes[0])],
	yAxes: [Object.assign({}, Chart.defaults.financial.scales.yAxes[0])]
};

Chart.controllers.candlestick = Chart.controllers.financial.extend({
	dataElementType: Chart.elements.Candlestick,

	updateElement: function(element, index, reset) {
		var me = this;
		var meta = me.getMeta();

How to use chart.js.helpers:

37
38
39
40
41
42
43
44
45
46

},{}],3:[function(require,module,exports){
// Get the chart variable
var Chart = require('chart.js');
Chart = typeof(Chart) === 'function' ? Chart : window.Chart;
var chartHelpers = Chart.helpers;
var helpers = require('./helpers.js');

// Configure plugin namespace
Chart.Annotation = Chart.Annotation || {};

How to use chart.js.defaults:

70
71
72
73
74
75
76
77
78
79

// Default annotation label options
var labelDefaults =
Chart.Annotation.labelDefaults = {
        backgroundColor: 'rgba(0,0,0,0.8)',
        fontFamily: Chart.defaults.global.defaultFontFamily,
        fontSize: Chart.defaults.global.defaultFontSize,
        fontStyle: 'bold',
        fontColor: '#fff',
        xPadding: 6,