chartjs / chartjs-plugin-annotation

Annotation plugin for Chart.js

chartjs-plugin-annotation.js

An annotation plugin for Chart.js >= 4.0.0

---

This plugin needs to be registered. It does not function as inline plugin.

---

For Chart.js 3.7.0 to 3.9.1 support, use version 2.2.1 of this plugin

For Chart.js 3.0.0 to 3.6.2 support, use version 1.4.0 of this plugin

For Chart.js 2.4.0 to 2.9.x support, use version 0.5.7 of this plugin

This plugin draws lines, boxes, points, labels, polygons and ellipses on the chart area.

Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. Annotations will not work on any chart that does not have two or more axes, including pie, radar, and polar area charts.

View this example

Documentation

You can find documentation for chartjs-plugin-annotation at www.chartjs.org/chartjs-plugin-annotation.

Contributing

Before submitting an issue or a pull request to the project, please take a moment to look over the contributing guidelines first.

License

Chart.Annotation.js is available under the MIT license.

chartjs-plugin-annotation's Issues

Mouse over

I can see there are some mouse events on the annotation, are those for the line, I assume so?

Is it possible to:

• Make the line bolder while the mouse is hovering
• Show a tooltip like for charts while the mouse is hovering

Andd how complicated would this be or what is the easiest strategy?

Cant draw vertical line graph with latest version?

Hello! Trying to draw multiple vertical lines in a line graph. Horizontal lines works as intended, but as you can see in this fiddle (http://stackoverflow.com/questions/44041583/vertical-line-with-annotation-plugin-and-labels-in-chart-js) vertical lines does not work.
This work on value but not string like year 5.. how to make it work?

"Types" of line draw

Its possible or already has a function to set the vertical line like a:

-----------------------------------------------

instead of

______________________________________________

Annotation not working if ticks converted to date

Annotation is not drawing for the below code. Can someone please suggest what is wrong in the below code?

Below is the fiddle:
https://jsfiddle.net/oz51504g/2/

How to plot date field in annotation?
I want to plot a horizontal line in 45 degree angle from the starting point. How can i achieve it?

Thanks in advance.

Box annotation labels

AFAICT, labels are not supported on box annotations, it would be nice if they were added.

Events don't bind to labels

onclick, onmouseover, etc. do not bind to the label text box.

This can be pretty confusing for users; they'll expect that the title will also trigger events (e.g., such as displaying a modal with information about phase changes or events in a data set).

Draw vertical line using Labels

I have text labels (dates) in my x-axis, how can I make a vertical line in, for example "17/8" I tried this and with x-axis-0 no error, no lines.
Any idea?
Thank you!
annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-1',
value: '17/08',
borderColor: 'DimGrey',
borderWidth: 5
}]
}

Not numerical min and max values

Great plugin! I really would like it to apply to date ranges, putting min and max-values like that:

yMin: '2016-06-01'
yMax: '2016-07-01'

Annotations not showing

Versions
chart.js v2.4.0
chartjs-plugin-annotation v0.5.2
(angular v1.6.0)

What is going wrong?
I used to generate the chart data in PHP and render it like this:

<div class="chart-container">
  <canvas id="chart"></canvas>
 </div>

<script type="text/javascript">
  window.onload = function() {
    var ctx = document.getElementById("chart").getContext("2d");
    window.chart = new Chart(ctx, <?php echo $chart["config"]; ?>);
  };
</script>

Annotations were shown as expected and all was good. But now I've separated the front end from the back end and I've written an Angular directive to aid in the generation of a chart like this:

import Chart from 'chart.js';
import 'chartjs-plugin-annotation';

class ChartController {
  $onChanges(changes) {
    if (changes.chartData && changes.chartData.currentValue.data) {
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = new Chart('chart', changes.chartData.currentValue);

      console.log(this.chart);
    }
  }
}

export default ChartController;

The chartData object is the same as in the PHP version. However, the annotations are not drawn. The console log does show that the annotations are bounded to the Chart instance:

I can not find anything about this issue. Does anybody have an idea on how to fix this?

Thanks in advance!

Annotation line and label have higher z position than Chart tooltips

I am not sure if it's correct approach but i feel like annotation should be behind tooltips.

So I suggest that default behavior should be "afterDatasetsDraw" for best look.

Adding an average line

I spend hours searching whether it's possible to add a horizontal line that has a y value that is based on the average of another data array. I came to this awesome plugin to the Chart.js but still couldn't find this function.

Is this somehow possible? Much appreciated!

Draw line on hover

See: http://stackoverflow.com/questions/36961835/how-to-render-a-vertical-line-on-hover-in-chartjs

Box with xMin and xMax still occupies all space

Hi,
I'm trying to use annotation with ChartJS scatter chart.

annotation: {
	drawTime: "afterDraw",
	annotations: [
		{
			type: 'box',
			// xScaleID: 'x-axis-1',
			xMin: (startDate + endDate)/2,
			xMax: endDate,
			backgroundColor: 'rgba(101, 33, 171, 0.2)',
		}
	]
}

I played with the x[Min|Max] values, however the box always occupies all available chart space. What can be cause of issue?
Thank you

Horizontal line is above tooltips

Please see the picture above. Is there a way to set the line bellow the tooltip ?

Chart scales are not adjusted with annotations

The automatic scale does not account for the annotations. If I set an annotation with value greater than the data scale the annotation is drawn outside the chart area.

Uncaught TypeError: Cannot read property 'xAxes' of undefined

Just before to say: I check the samples, no problem,working, there is no jQuery

But when i try to load the js files

• Chart.bundle.js
• chartjs-plugin-annotation.js"

• jquery-1.12.4.js    (tried also  jquery-3.2.1.js)
  

i just load the "head" of the main page , didn't call to any page with chart

And i get error :
Uncaught TypeError: Cannot read property 'xAxes' of undefined

chartInstance.ensureScalesHaveIDs();
		chartHelpers.each(chartOptions.scales.xAxes, setAfterDataLimitsHook);****here*****
		chartHelpers.each(chartOptions.scales.yAxes, setAfterDataLimitsHook);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.3/chartjs-plugin-annotation.js"></script>
<script
        src="https://code.jquery.com/jquery-1.12.4.js"
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>

Line behind the bar graphs

How i can set the lines to behind of the bar ?

Not working on bubble chart

JS-Error in use with chart doughnut on the same page

If I render a doughnut-chart on the same page with annotation-plugin I get the following JS-Error and the chart is not shown: TypeError: t.scales is undefined
When I remove the annotation plugin chart is rendered. You can see it here:
https://codepen.io/PureDude/pen/JNbVqL
Any idea what this can be?

Horizontal Line not working with my dataset

Kindly find the code in the fiddle : Code

I have 5 similar charts on the same page. Annotations don't work on any of them. Unable to find the reason behind this. Please help.

Can't draw vertical lines in line graph

Hello! Trying to draw multiple vertical lines in a line graph. Horizontal lines works as intended, but as you can see in this fiddle (https://jsfiddle.net/mfjvfz0o/) vertical lines does not work.

Am I doing something wrong or is this a bug?

Use beforeDraw to prevent overlapping

Consider using beforeDraw (or make it an option) so that the annotation doesn't overlap other chart elements. Currently the annotation gets drawn over tooltips. I can send through a pull request if you want.

Release 0.5.3

Issue #55 was fixed in January with d24ffaa, yet the latest release available on npm is 0.5.2 and doesn't include this fix. Was the release of 0.5.3 forgotten?

Bar chart and box annotation

I'm trying to add a box annotation on a bar chart,
https://jsfiddle.net/jxpx1kup/1/
As you can see this is not working as I expect it. Maybe I'm doing something wrong, but I think that when using bar chart, the function getPixelForTick should be used intead of getPixelForValue as you can see on this jsfiddle :
https://jsfiddle.net/jxpx1kup/

(The edited line is 53.)

Cannot read property 'Annotation' of undefined at Object.6../annotation.js?please find some solution for this i am struck in that error after give its reference

Uncaught TypeError: Cannot read property 'Annotation' of undefined
at Object.6../annotation.js (chartjs-plugin-annotation.js:451)
at s (chartjs-plugin-annotation.js:10)
at e (chartjs-plugin-annotation.js:10)
at chartjs-plugin-annotation.js:10

Line charts seem to not be supported

I could only get line annotations to work with scatter charts.

Bar ScaleID

I'm using ChartJS 2:

` Chart.defaults.global.defaultFontColor = '#fff';
Chart.defaults.global.defaultFontSize = 25;
Chart.defaults.global.title.fontSize = 55;

    var barChartData = {
        labels: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
        datasets: [{
            label: 'Realizado',
            backgroundColor: [
             'rgba(99,124,198,0.5)',
             'rgba(99,124,198,0.5)',
             'rgba(99,124,198,0.5)',
             'rgba(99,124,198,0.5)',
             'rgba(99,124,198,0.5)',
             'rgba(99,124,198,0.5)',
             'rgba(99,124,198,0.5)',
             'rgba(99,124,198,0.5)',
             'rgba(99,124,198,0.5)',
             'rgba(99,124,198,0.5)',
             'rgba(99,124,198,0.5)',
             'rgba(99,124,198,0.5)'
           ],
           borderColor: [
             'rgba(99,124,198,1)',
             'rgba(99,124,198,1)',
             'rgba(99,124,198,1)',
             'rgba(99,124,198,1)',
             'rgba(99,124,198,1)',
             'rgba(99,124,198,1)',
             'rgba(99,124,198,1)',
             'rgba(99,124,198,1)',
             'rgba(99,124,198,1)',
             'rgba(99,124,198,1)',
             'rgba(99,124,198,1)',
            'rgba(99,124,198,1)'
           ],
            data: [4683, 6412, 8988, 8288, 6612, 7642, 4954, 0, 0, 0, 0, 0]
        }, {
            label: 'Media/Dia',
              backgroundColor: [
             'rgba(229,58,53,0.5)',
             'rgba(229,58,53,0.5)',
             'rgba(229,58,53,0.5)',
             'rgba(229,58,53,0.5)',
             'rgba(229,58,53,0.5)',
             'rgba(229,58,53,0.5)',
             'rgba(229,58,53,0.5)',
             'rgba(229,58,53,0.5)',
             'rgba(229,58,53,0.5)',
             'rgba(229,58,53,0.5)',
             'rgba(229,58,53,0.5)',
             'rgba(229,58,53,0.5)'
           ],
           borderColor: [
             'rgba(229,58,53,1)',
             'rgba(229,58,53,1)',
             'rgba(229,58,53,1)',
             'rgba(229,58,53,1)',
             'rgba(229,58,53,1)',
             'rgba(229,58,53,1)',
             'rgba(229,58,53,1)',
             'rgba(229,58,53,1)',
             'rgba(229,58,53,1)',
             'rgba(229,58,53,1)',
             'rgba(229,58,53,1)',
            'rgba(229,58,53,1)'
           ],
            data: [312, 305, 409, 377, 301, 318, 550, 0, 0, 0, 0, 0]
        }, {
            label: 'Programado',
              backgroundColor: [
             'rgba(85,208,161,0.5)',
             'rgba(85,208,161,0.5)',
             'rgba(85,208,161,0.5)',
             'rgba(85,208,161,0.5)',
             'rgba(85,208,161,0.5)',
             'rgba(85,208,161,0.5)',
             'rgba(85,208,161,0.5)',
             'rgba(85,208,161,0.5)',
             'rgba(85,208,161,0.5)',
             'rgba(85,208,161,0.5)',
             'rgba(85,208,161,0.5)',
             'rgba(85,208,161,0.5)'
           ],
           borderColor: [
             'rgba(85,208,161,1)',
             'rgba(85,208,161,1)',
             'rgba(85,208,161,1)',
             'rgba(85,208,161,1)',
             'rgba(85,208,161,1)',
             'rgba(85,208,161,1)',
             'rgba(85,208,161,1)',
             'rgba(85,208,161,1)',
             'rgba(85,208,161,1)',
             'rgba(85,208,161,1)',
             'rgba(85,208,161,1)',
             'rgba(85,208,161,1)'
           ],
            data: [8000, 8000, 8000, 7587, 7393, 8411, 9152, 0, 0, 0, 0, 0]
        }]
    };



    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");


        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                barValueSpacing: 0,
                showAllTooltips: true,
                elements: {
                    rectangle: {
                        borderWidth: 2,
                        borderColor: 'rgb(0, 255, 0)',
                        borderSkipped: 'bottom'
                    }
                },
                scales: {
                  xAxes: [{
                     gridLines: {
                        show: true,
                        color: "#FF0000"
                      }
                    }],
                  yAxes: [{
                     gridLines: {
                        show: true,
                        color: "#fff"
                      }
                    }]
                  },
                responsive: true,

                legend: {
                    position: 'top',
                },
                animation: {
                    onComplete: function () {
                        var chartInstance = this.chart;
                        var ctx = chartInstance.ctx;
                        ctx.textAlign = "center";
                        ctx.font = "bold 20px Arial";
                        ctx.fillStyle = "white";                            
                        Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            Chart.helpers.each(meta.data.forEach(function (bar, index) {
                                ctx.fillText(dataset.data[index], bar._model.x, bar._model.y - 30);
                            }),this)
                        }),this);
                    }
                },
                title: {
                    display: true,
                    text: 'Embarques: Realizado / Media Dia X Programado'
                },
                annotation: {
                    annotations: [{
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y-axis-1',
                        value: '1200',
                        borderColor: 'red',
                        borderWidth: 1
                    }]
                }
            }
        });
    };`

Not this worked , do not know what i'm doing wrong

How does Annotation Value work?

I have a bubble chart and I want to create a vertical line on x-axis 1.0, 2.0, 3.0, 4.0

My current configuration is:

annotation: {
    annotations: [{
        type: 'line',
        mode: 'vertical',
        scaleID: 'y-axis-0',
        value: '31.5',
        borderColor: '#999999',
        borderWidth: 5
    }]
}

My problem is how does value work because when the window size changes, the vertical line moves as well.

Text annotations

Good stuff, you sure saved me a couple hours! Any updates on Text annotations?

Additionally, wouldn't it be neat to attach annotations to datasets? That way, annotations can be hidden when its related dataset is toggled.

Has this project been abandoned, or are there any plans for these updates or similar?

Thanks :)

Adding an average line

I spend hours searching whether it's possible to add a horizontal line that has a y value that is based on the average of another data array. I came to this awesome plugin to the Chart.js but still couldn't find this function.

Is this somehow possible? Much appreciated!

Annotations do not update correctly on config change

Demo: http://codepen.io/compwright/pen/BQpLjx/

Dashed Line Error

Using a dashed line as an annotation causes data points and marker lines to also become dashed when the graph updates (when a data point is hovered over or a data set is hidden).

Before graph update

After graph update

I don't know much about js canvas, but it seems that the drawing mode is set to dashed before the annotation is drawn. But the problem occurs because the drawing mode isn't set back to solid before the graph is updated and redrawn.

Add Label to Annotations

Add Label to the different types to specify what each value is representative of.
Text should be placed near line, or on a hover over. If I have time I will try to work on this.

Line chart: Nothing happen

Hello I'm trying to implement the plugin with the code:

var aqiChart = new Chart($("#aqi-chart"), {
  type: 'line',
  data: {
    labels: [0,100],
    datasets: [{ //AQI LINES
      label: 'aqi',
      data: [100,100]
    }]
  },
  options: {
    spanGaps: true,
    defaultColor: '#FF1744',
    scales: {
      type: 'time',
      xAxes: [{
        type: "time"
      }]
    }
  },
  annotation: {
    annotations: [{
      type: 'line',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: 10,
      borderColor: 'black',
      borderWidth: 3
    }]
  }
});

but nothing happen, can you help me?

Adding an average line

I spend hours searching whether it's possible to add a horizontal line that has a y value that is based on the average of another data array. I came to this awesome plugin to the Chart.js but still couldn't find this function.

Is this somehow possible? Much appreciated!

Check if Annotation Events are null

If there is no defined event, back end code like c# may send "Events" as null.

In that case, watchFor control gives error because it's just checking Length, before checking if object is null or not.

Errors are produced when X values are dates

Moment.js throws an error (Cannot read property 'undefined' of undefined) if the annotation's x-value is a date.

annotation disappear if value is 0 (zero)

I have an annotation that has the value 0, but then the annotation just disappear.

Any tricks to make it appear?

using sample "line.js" - adding lines - which move about

This may be similar to #18, but in trying to understand how things work, I took the sample box.js
which worked consistently, and added a couple of lines - vertical and horizontal.

          annotations: [{
              type: 'line',
              mode: 'vertical',
              scaleID: 'y-axis-1',
              value: 60,
              backgroundColor: 'rgba(101, 33, 171, 0.5)',
              borderColor: 'rgb(101, 33, 171)',
              borderWidth: 5
          },{
              type: 'line',
              mode: 'horizontal',
              scaleID: 'x-axis-1',
              value: 30,
              backgroundColor: 'rgba(101, 33, 171, 0.5)',
              borderColor: 'rgb(101, 33, 171)',
              borderWidth: 5
          },{
              type: 'box',
              xScaleID: 'x-axis-1',

[and so on]

But when I display it, the lines fall neither on the 60 or the 30 mark. Even more curious, when you refresh it, the lines are still not on 60 / 30, and they are different to the previous display as well.

is this a fault, or am I driving it incorrectly?

Examples don't work for anything other than scatter

The examples / documentation for this plugin is completely bare. Even if I try copying the examples, changing anything even slightly in the example data causes the annotations to vanish.

Hidden label when using position: "top" on vertical line label

Version: 0.5.3

Using position: "top" results in a hidden label when using vertical line annotation.

Changing line 852 in the source code from

ret.x = (isFinite(line.m) ? line.getY(ret.y) : view.x1) - xa;

to

ret.x = (isFinite(line.m) ? line.getX(ret.y) : view.x1) - xa;

fixes this issue. Maybe just a typo?

Check "Scales" options first to continue

Before processing, need to check "Scales" options if it's null or not. Some charts like "Pie chart" etc. may not have "Scales" options.

Error line:
https://github.com/chartjs/chartjs-plugin-annotation/blob/master/src/annotation.js#L36,L37

Add dashed line support

Need support for dashed line

Adding an average line

I spend hours searching whether it's possible to add a horizontal line that has a y value that is based on the average of another data array. I came to this awesome plugin to the Chart.js but still couldn't find this function.

Is this somehow possible? Much appreciated!

How can I reset the graph?

I load the data when a control is clicked. Someone click on "A" it draws data correspondent to "A", now when someone click on "B" I want to call ajax again to reload it, how do I reset it first so it doenst append the data?
Thank you

Docs need screenshot :)

Skewed line annotations

Hi, I think it would be useful if you could have skewed line annotations. I already got it working in my fork with 4 lines of code and adding an endValue option next to the existing value property.

I can create a pull request if you'd like.

Lag/Hard working with double annotation when also adding double label.

Hello,

I have added this code to my chart.js and the script works very hard when i mouseOver over the points in the chart. So hard that even my browser stucks for some seconds.

If i set labels to enable: false, everything is ok.

I really need double annotation with double label because i also have 2 line charts in the same diagram.

I am using the latest chart.js.

{
annotation: {
                annotations: [{
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: 85,
                        endValue: 85,
                        borderColor: '#bcbcbc',
                        borderWidth: 1,
                        borderDash: [4.4, 4.4],
                        borderDashOffset: 0,
                        label: {
                            enabled: true,
                            content: 'Sistolica maxim'
                        }
                    },
                    {
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: 135,
                        endValue: 135,
                        borderColor: '#bcbcbc',
                        borderWidth: 1,
                        borderDash: [4.4, 4.4],
                        borderDashOffset: 0,
                        label: {
                            enabled: true,
                            content: 'Sistolica maxim'
                        }
                    }]
            },
            drawTime: 'beforeDatasetsDraw'
}

and full code:

    var config = {
        type: 'line',
        data: {
            labels: ['AUG 8', 'SEP 15', 'OCT 22', 'NOV 29', 'DEC 8', 'JAN 15', 'FEB 22', 'AUG 8', 'SEP 15', 'OCT 22', 'NOV 29', 'DEC 8', 'IAN 23'],
            datasets: [{
                    label: 'Distolica',
                    fill: false,

                    pointBackgroundColor: '#fff',
                    pointRadius: 5,
                    pointBorderColor: '#ccc',
                    pointBorderWidth: 2,
                    pointHoverRadius: 5,
                    pointHoverBorderWidth: 2,
                    pointHoverBorderColor: '#fff',
                    borderColor: '#ccc',
                    borderWidth: 2,
                    tension: 0,
                    data: [75, 70, 75, 80, 54, 65, 78, 64, 65, 71, 80, 60, 55]
                }, {
                    label: 'Sistolica',
                    fill: false,
                    pointBackgroundColor: '#FFF',
                    pointRadius: 5,
                    pointBorderColor: '#4184F3',
                    pointBorderWidth: 2,
                    pointHoverBackgroundColor: '#4184F3',
                    pointHoverRadius: 6,
                    pointHoverBorderWidth: 2,
                    pointHoverBorderColor: '#fff',
                    borderColor: '#4184F3',
                    borderWidth: 3,
                    tension: 0,
                    data: [150, 135, 167, 184, 110, 125, 185, 152, 134, 120, 140, 130, 78]
                }]
        },
        options: {
            animation: {
                duration: 0
            },
            responsive: true,
            legend: {
                display: false
            },
            tooltips: {
                enabled: false
            },
            scales: {
                xAxes: [{
                        id: 'x-axis-0',
                        ticks: {
                            stepSize: 10,
                            fontColor: '#ababab',
                            fontFamily: 'Roboto',
                            maxRotation: 0
                        },
                        gridLines: {
                            color: '#f1f1f1',
                            drawBorder: false,
                            zeroLineColor: '#f1f1f1'
                        }
                    }],
                yAxes: [{
                        id: 'y-axis-0',
                        ticks: {
                            stepSize: 20,
                            fontColor: '#ababab',
                            fontFamily: 'Roboto',
                            padding: 15
                        },
                        gridLines: {
                            color: '#f1f1f1',
                            drawBorder: false
                        }
                    }]
            },
            hover: {
                mode: 'x',
                intersect: false
            },
            annotation: {
                annotations: [{
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: 85,
                        endValue: 85,
                        borderColor: '#bcbcbc',
                        borderWidth: 1,
                        borderDash: [4.4, 4.4],
                        borderDashOffset: 0,
                        label: {
                            enabled: true,
                            content: 'Sistolica maxim'
                        }
                    },
                    {
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: 135,
                        endValue: 135,
                        borderColor: '#bcbcbc',
                        borderWidth: 1,
                        borderDash: [4.4, 4.4],
                        borderDashOffset: 0,
                        label: {
                            enabled: true,
                            content: 'Sistolica maxim'
                        }
                    }]
            },
            drawTime: 'beforeDatasetsDraw'
        }
    };

    var myRadar = new Chart(document.getElementById('myChart'), config);

    document.getElementById("myChart").onmousemove = function (evt) {
        var activePoint = myRadar.lastActive[0];
        var activePoint1 = myRadar.lastActive[1];

        if (activePoint !== undefined && activePoint1 !== undefined) {

            var datasetIndex = activePoint._datasetIndex;
            var datasetIndex1 = activePoint1._datasetIndex;

            var index = activePoint._index;
            var index1 = activePoint1._index;

            var datasetName = config.data.datasets[datasetIndex].label;
            var datasetName1 = config.data.datasets[datasetIndex1].label;

            var title = config.data.labels[index];
            var title1 = config.data.labels[index1];

            var dataValue = config.data.datasets[datasetIndex].data[index];
            var dataValue1 = config.data.datasets[datasetIndex1].data[index1];

            document.getElementById('datasetName1').innerHTML = datasetName;
            document.getElementById('datasetName2').innerHTML = datasetName1;
            document.getElementById('valueS1').innerHTML = dataValue;
            document.getElementById('valueS2').innerHTML = dataValue1;
            document.getElementById('label').innerHTML = title;

        }
    };
})(jQuery);

Visual result:

https://cloud.githubusercontent.com/assets/23656849/20636667/d8e11fa2-b379-11e6-94f7-39cf3d239578.jpg

Bower install

It would be nice to be able to install it via bower.
It is suggested in the readme but there is no bower.json

Setting drawTime in Annotations array

Hello,

I want to draw a box and a line Annotation. But box annotation must be drawn before dataset draw. Line annotation must be drawn after dataset draw.

So I'm looking for a configuration like following:

annotation: {
                        annotations: [{
                            drawTime: "beforeDatasetsDraw",
                            type: 'box',
                            xScaleID: 'x-axis-1',
                            yScaleID: 'y-axis-1',
                            xMin: -120,
                            xMax: 20,
                            yMin: -120,
                            yMax: 20,
                            backgroundColor: 'rgba(101, 33, 171, 0.5)',
                            borderColor: 'rgb(101, 33, 171)',
                            borderWidth: 1,
                        },{
                            drawTime: "afterDatasetsDraw",
                            type: 'line',
                            mode: 'horizontal',
                            scaleID: 'y-axis-1',
                            value: 120,
                            borderColor: 'rgba(255, 0, 0, 0.5)',
                            borderWidth: 4,
                            label: {
                                enabled: false,
                                content: 'Test label'
                            }]
                    }

Thanks.