{"action":"opened","issue":{"url":"https://api.github.com/repos/chartjs/chartjs-plugin-annotation/issues/41","repository_url":"https://api.github.com/repos/chartjs/chartjs-plugin-annotation","labels_url":"https://api.github.com/repos/chartjs/chartjs-plugin-annotation/issues/41/labels{/name}","comments_url":"https://api.github.com/repos/chartjs/chartjs-plugin-annotation/issues/41/comments","events_url":"https://api.github.com/repos/chartjs/chartjs-plugin-annotation/issues/41/events","html_url":"https://github.com/chartjs/chartjs-plugin-annotation/issues/41","id":191775334,"number":41,"title":"Lag/Hard working with double annotation when also adding double label.","user":{"login":"Alexisander","id":23656849,"avatar_url":"https://avatars.githubusercontent.com/u/23656849?v=3","gravatar_id":"","url":"https://api.github.com/users/Alexisander","html_url":"https://github.com/Alexisander","followers_url":"https://api.github.com/users/Alexisander/followers","following_url":"https://api.github.com/users/Alexisander/following{/other_user}","gists_url":"https://api.github.com/users/Alexisander/gists{/gist_id}","starred_url":"https://api.github.com/users/Alexisander/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Alexisander/subscriptions","organizations_url":"https://api.github.com/users/Alexisander/orgs","repos_url":"https://api.github.com/users/Alexisander/repos","events_url":"https://api.github.com/users/Alexisander/events{/privacy}","received_events_url":"https://api.github.com/users/Alexisander/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-11-25T23:36:02Z","updated_at":"2016-11-25T23:36:02Z","closed_at":null,"body":"Hello,\r\n\r\nI have added this code to my chart.js and the script workd very hard when i mouseOver over the points in the chart.\r\n\r\nIf i set labels to enable: false, everything is ok.\r\n\r\nI really need double annotation with double label because i also have 2 line charts in the same diagram.\r\n\r\nI am using the latest chart.js.\r\n\r\n`            \r\nannotation: {\r\n                annotations: [{\r\n                        type: 'line',\r\n                        mode: 'horizontal',\r\n                        scaleID: 'y-axis-0',\r\n                        value: 85,\r\n                        endValue: 85,\r\n                        borderColor: '#bcbcbc',\r\n                        borderWidth: 1,\r\n                        borderDash: [4.4, 4.4],\r\n                        borderDashOffset: 0,\r\n                        label: {\r\n                            enabled: true,\r\n                            content: 'Sistolica maxim'\r\n                        }\r\n                    },\r\n                    {\r\n                        type: 'line',\r\n                        mode: 'horizontal',\r\n                        scaleID: 'y-axis-0',\r\n                        value: 135,\r\n                        endValue: 135,\r\n                        borderColor: '#bcbcbc',\r\n                        borderWidth: 1,\r\n                        borderDash: [4.4, 4.4],\r\n                        borderDashOffset: 0,\r\n                        label: {\r\n                            enabled: true,\r\n                            content: 'Sistolica maxim'\r\n                        }\r\n                    }]\r\n            },\r\n            drawTime: 'beforeDatasetsDraw'\r\n`\r\n\r\nand full code:\r\n\r\n`\r\n    var config = {\r\n        type: 'line',\r\n        data: {\r\n            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'],\r\n            datasets: [{\r\n                    label: 'Distolica',\r\n                    fill: false,\r\n                    /*point configuration*/\r\n                    pointBackgroundColor: '#fff',\r\n                    pointRadius: 5,\r\n                    pointBorderColor: '#ccc',\r\n                    pointBorderWidth: 2,\r\n                    pointHoverRadius: 5,\r\n                    pointHoverBorderWidth: 2,\r\n                    pointHoverBorderColor: '#fff',\r\n                    /*line configuration*/\r\n                    borderColor: '#ccc',\r\n                    borderWidth: 2,\r\n                    tension: 0,\r\n                    data: [75, 70, 75, 80, 54, 65, 78, 64, 65, 71, 80, 60, 55]\r\n                }, {\r\n                    label: 'Sistolica',\r\n                    fill: false,\r\n                    /*point configuration*/\r\n                    pointBackgroundColor: '#FFF',\r\n                    pointRadius: 5,\r\n                    pointBorderColor: '#4184F3',\r\n                    pointBorderWidth: 2,\r\n                    pointHoverBackgroundColor: '#4184F3',\r\n                    pointHoverRadius: 6,\r\n                    pointHoverBorderWidth: 2,\r\n                    pointHoverBorderColor: '#fff',\r\n                    /*line configuration*/\r\n                    borderColor: '#4184F3',\r\n                    borderWidth: 3,\r\n                    tension: 0,\r\n                    data: [150, 135, 167, 184, 110, 125, 185, 152, 134, 120, 140, 130, 78]\r\n                }]\r\n        },\r\n        options: {\r\n            animation: {\r\n                duration: 0\r\n            },\r\n            responsive: true,\r\n            legend: {\r\n                display: false\r\n            },\r\n            tooltips: {\r\n                enabled: false\r\n            },\r\n            scales: {\r\n                xAxes: [{\r\n                        id: 'x-axis-0',\r\n                        ticks: {\r\n                            stepSize: 10,\r\n                            fontColor: '#ababab',\r\n                            fontFamily: 'Roboto',\r\n                            maxRotation: 0\r\n                        },\r\n                        gridLines: {\r\n                            //display: false,\r\n                            color: '#f1f1f1',\r\n                            drawBorder: false,\r\n                            zeroLineColor: '#f1f1f1'\r\n                        }\r\n                    }],\r\n                yAxes: [{\r\n                        id: 'y-axis-0',\r\n                        ticks: {\r\n                            stepSize: 20,\r\n                            fontColor: '#ababab',\r\n                            fontFamily: 'Roboto',\r\n                            padding: 15\r\n                        },\r\n                        gridLines: {\r\n                            color: '#f1f1f1',\r\n                            drawBorder: false\r\n                        }\r\n                    }]\r\n            },\r\n            hover: {\r\n                mode: 'x',\r\n                intersect: false\r\n            },\r\n            annotation: {\r\n                annotations: [{\r\n                        type: 'line',\r\n                        mode: 'horizontal',\r\n                        scaleID: 'y-axis-0',\r\n                        value: 85,\r\n                        endValue: 85,\r\n                        borderColor: '#bcbcbc',\r\n                        borderWidth: 1,\r\n                        borderDash: [4.4, 4.4],\r\n                        borderDashOffset: 0,\r\n                        label: {\r\n                            enabled: true,\r\n                            content: 'Sistolica maxim'\r\n                        }\r\n                    },\r\n                    {\r\n                        type: 'line',\r\n                        mode: 'horizontal',\r\n                        scaleID: 'y-axis-0',\r\n                        value: 135,\r\n                        endValue: 135,\r\n                        borderColor: '#bcbcbc',\r\n                        borderWidth: 1,\r\n                        borderDash: [4.4, 4.4],\r\n                        borderDashOffset: 0,\r\n                        label: {\r\n                            enabled: true,\r\n                            content: 'Sistolica maxim'\r\n                        }\r\n                    }]\r\n            },\r\n            drawTime: 'beforeDatasetsDraw'\r\n        }\r\n    };\r\n\r\n    var myRadar = new Chart(document.getElementById('myChart'), config);\r\n\r\n    document.getElementById(\"myChart\").onmousemove = function (evt) {\r\n        var activePoint = myRadar.lastActive[0];\r\n        var activePoint1 = myRadar.lastActive[1];\r\n\r\n        if (activePoint !== undefined && activePoint1 !== undefined) {\r\n\r\n            var datasetIndex = activePoint._datasetIndex;\r\n            var datasetIndex1 = activePoint1._datasetIndex;\r\n\r\n            var index = activePoint._index;\r\n            var index1 = activePoint1._index;\r\n\r\n            var datasetName = config.data.datasets[datasetIndex].label;\r\n            var datasetName1 = config.data.datasets[datasetIndex1].label;\r\n\r\n            var title = config.data.labels[index];\r\n            var title1 = config.data.labels[index1];\r\n\r\n            var dataValue = config.data.datasets[datasetIndex].data[index];\r\n            var dataValue1 = config.data.datasets[datasetIndex1].data[index1];\r\n\r\n            document.getElementById('datasetName1').innerHTML = datasetName;\r\n            document.getElementById('datasetName2').innerHTML = datasetName1;\r\n            document.getElementById('valueS1').innerHTML = dataValue;\r\n            document.getElementById('valueS2').innerHTML = dataValue1;\r\n            document.getElementById('label').innerHTML = title;\r\n\r\n        }\r\n    };\r\n\r\n})(jQuery);\r\n`"}}
{"actor":{"display_login":"Alexisander"}}