chartjs / chartjs-plugin-annotation Goto Github PK
View Code? Open in Web Editor NEWAnnotation plugin for Chart.js
License: MIT License
Annotation plugin for Chart.js
License: MIT License
Its possible or already has a function to set the vertical line like a:
-----------------------------------------------
instead of
______________________________________________
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!
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
}]
}
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?
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?
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!
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!
Need support for dashed line
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?
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.
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!
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.
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!
Moment.js throws an error (Cannot read property 'undefined' of undefined) if the annotation's x-value is a date.
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
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.)
I have an annotation that has the value 0, but then the annotation just disappear.
Any tricks to make it appear?
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:
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
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?
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).
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.
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?
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
Just before to say: I check the samples, no problem,working, there is no jQuery
But when i try to load the js files
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/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>
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 :)
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.
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.
I could only get line annotations to work with scatter charts.
It would be nice to be able to install it via bower
.
It is suggested in the readme
but there is no bower.json
I can see there are some mouse events on the annotation, are those for the line, I assume so?
Is it possible to:
Andd how complicated would this be or what is the easiest strategy?
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
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?
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'
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.
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
AFAICT, labels are not supported on box annotations, it would be nice if they were added.
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.
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.
How i can set the lines to behind of the bar ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.