Using Chart js I am trying to pull data from Ajax call to supply to the Chart.
I found a few other postings where people have suggested delaying the canvas load but nothing has seemed to work. Currently this is the what I have below and the error that I get is
$(function () {
GetChartData();
function GetChartData() {
$.ajax({
url: ajaxURL,
method: 'GET',
dataType: 'json',
success: function (d) {
//-------------
//- BAR CHART -
//-------------
var barChartData = d;
var barChartCanvas = $("#barChart").get(0).getContext("2d");
var barChart = new Chart(barChartCanvas);
// console.log(datajson);
//barChartData.datasets[1].fillColor = "#00a65a";
//barChartData.datasets[1].strokeColor = "#00a65a";
//barChartData.datasets[1].pointColor = "#00a65a";
var barChartOptions = {
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
//scaleBeginAtZero: true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - If there is a stroke on each bar
barShowStroke: true,
//Number - Pixel width of the bar stroke
barStrokeWidth: 2,
//Number - Spacing between each of the X value sets
barValueSpacing: 5,
//Number - Spacing between data sets within X values
barDatasetSpacing: 1,
multiTooltipTemplate: "<%=datasetLabel%>: <%= value + ' %' %>",
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
//Boolean - whether to make the chart responsive
responsive: true,
maintainAspectRatio: true
};
barChartOptions.datasetFill = false;
barChart.Bar(barChartData, barChartOptions);
}
});
}
});
UPDATE HERE SHOWING HOW NON AJAX WORKS
The below code is taking the results of the Ajax get request (which I got from dumping it to the console) and creating a "hard coded" version of the same thing. The only thing that should technically be different is one has the data loaded at time of the page and the second the data is loaded very briefly after.
var chartData = {
"labels": [
"April"
],
"datasets": [
{
"label": "Not Sure What to Put Here",
"fillColor": "#662B60",
"strokeColor": "#662B60",
"pointColor": "#662B60",
"pointStrokeColor": "#662B60",
"pointHighlightFill": "#662B60",
"pointHighlightStroke": "#662B60",
"data": [
1
]
},
{
"label": "Not Sure What to Put Here",
"fillColor": "#88B56E",
"strokeColor": "#88B56E",
"pointColor": "#88B56E",
"pointStrokeColor": "#88B56E",
"pointHighlightFill": "#88B56E",
"pointHighlightStroke": "#88B56E",
"data": [
1
]
},
{
"label": "Not Sure What to Put Here",
"fillColor": "#48CA2B",
"strokeColor": "#48CA2B",
"pointColor": "#48CA2B",
"pointStrokeColor": "#48CA2B",
"pointHighlightFill": "#48CA2B",
"pointHighlightStroke": "#48CA2B",
"data": [
0.83
]
}
]
};
//-------------
//- BAR CHART -
//-------------
var barChartData = chartData;
var barChartCanvas = $("#barChart").get(0).getContext("2d");
var barChart = new Chart(barChartCanvas);
//barChartData.datasets[1].fillColor = "#00a65a";
//barChartData.datasets[1].strokeColor = "#00a65a";
//barChartData.datasets[1].pointColor = "#00a65a";
var barChartOptions = {
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
//scaleBeginAtZero: true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - If there is a stroke on each bar
barShowStroke: true,
//Number - Pixel width of the bar stroke
barStrokeWidth: 2,
//Number - Spacing between each of the X value sets
barValueSpacing: 5,
//Number - Spacing between data sets within X values
barDatasetSpacing: 1,
multiTooltipTemplate: "<%=datasetLabel%>: <%= value + ' %' %>",
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
//Boolean - whether to make the chart responsive
responsive: true,
maintainAspectRatio: true
};
barChartOptions.datasetFill = false;
barChart.Bar(barChartData, barChartOptions);
Update
I changed from the min version of chart.js to the full version so I could see where exactly it was erroring out at.
Here is the image from chrome console
The problem is that when your code executes, the canvas has not been created yet.
You should wrap your code inside a function and assign that function to window.onload event. You can see the sample code below.
window.onload = function() {
var ctx = document.getElementById("myChart");
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "2015",
data: [10, 8, 6, 5, 12, 8, 16, 17, 6, 7, 6, 10]
}]
}
})
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
Found the answer,
The Ajax results has to be parsed first.
resulting fix
var barChartData = JSON.parse(d);
running the following worked for me:
window.onload = function () {
}
For other users who have this problem, make sure your container canvas element exists, when called upon.
You may try putting the Chart.JS script tag and other custom JS scripts just before the end of **<**/body> tag.
It looks like you're using an object that doesn't exist, well at least I cant see it, datasets. I can only see length being called on this object, unless there's missing code?
I can see you assign d to barChartData
var barChartData = d;
So, you might want to replace the instances of datasets with barChartData.
It's an old question but, I had this issue as well and in my case my data was length = 0. I solved this just adding a validation before calling the the graph:
if (barChartData.length > 0)
{
objChart = Morris.Bar({....
}
Related
I have a chart that shows Total Sales figures. The Problem is that I do not want to show the line chart from 0 USD but instead from 50 USD?
I saw this answer which solved the problem by overriding the settings onLoad, but I cant get it to work for me. There has to be a clear way of doing this, no?
<canvas id="salesChart" style="height: 180px;"></canvas>
<script>
// Get context with jQuery - using jQuery's .get() method.
var salesChartCanvas = $("#salesChart").get(0).getContext("2d");
// This will get the first returned node in the jQuery collection.
var salesChart = new Chart(salesChartCanvas);
var salesChartData = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [
{
label: "HeartBeat",
fillColor: "rgba(60,141,188,0.9)",
strokeColor: "rgba(60,141,188,0.8)",
pointColor: "#3b8bba",
pointStrokeColor: "rgba(60,141,188,1)",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(60,141,188,1)",
data: [89.90, 94.00, 87.64, 90.91, 93.41, 88.89, 94.17, 92.00, 93.68, 96.15, 0.00, 0.00]
}
]
};
var salesChartOptions = {
showScale: true, //Boolean - If we should show the scale at all
scaleShowGridLines: true, //Boolean - Whether grid lines are shown across the chart
scaleGridLineColor: "rgba(0,0,0,.05)", //String - Colour of the grid lines
scaleGridLineWidth: 1, //Number - Width of the grid lines
scaleShowHorizontalLines: true, //Boolean - Whether to show horizontal lines (except X axis)
scaleShowVerticalLines: true, //Boolean - Whether to show vertical lines (except Y axis)
bezierCurve: true, //Boolean - Whether the line is curved between points
bezierCurveTension: 0.3, //Number - Tension of the bezier curve between points
pointDot: true, //Boolean - Whether to show a dot for each point
pointDotRadius: 4, //Number - Radius of each point dot in pixels
pointDotStrokeWidth: 1, //Number - Pixel width of point dot stroke
pointHitDetectionRadius: 20, //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
datasetStroke: true, //Boolean - Whether to show a stroke for datasets
datasetStrokeWidth: 2, //Number - Pixel width of dataset stroke
datasetFill: true, //Boolean - Whether to fill the dataset with a color
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%=datasets[i].label%></li><%}%></ul>",
//Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,
//Boolean - whether to make the chart responsive to window resizing
responsive: true
};
//Create the line chart
salesChart.Line(salesChartData, salesChartOptions);
</script>
I am implementing line chart and I want to hide x'Axis label from line chart. I putted scaleFontSize: 0, , Than x'Axis and Y'axis labels are hide. But I want to hide only x'Axis label.
var lineOptions = {
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether the line is curved between points
bezierCurve : true,
//Number - Tension of the bezier curve between points
bezierCurveTension : 0.4,
//Boolean - Whether to show a dot for each point
pointDot : true,
//Number - Radius of each point dot in pixels
pointDotRadius : 4,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth : 1,
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
pointHitDetectionRadius : 20,
//Boolean - Whether to show a stroke for datasets
datasetStroke : true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth : 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill : true,
//Boolean - Re-draw chart on page resize
responsive: true,
//String - A legend template
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};
var lineData = {
labels: data,
datasets: [
{
pointHighlightStroke: "rgba(151,187,205,1)",
data: []
}
]
};
var getElement = document.getElementById("departuresChart2");
var ctx = getElement.getContext("2d");
$scope.myNewChart = new Chart(ctx).Line(lineData, lineOptions);
I am taking reference from http://www.chartjs.org/docs/#line-chart-introduction.
I want to hide only A'axis label.I have seen one link in stackoverflow Remove x-axis label/text in chart.js. But still I am not able to fixed. Thanks
You have to set scale.xLabels property of your chart (instance), to an empty array - [] (hides x-axis gridlines), or $scope.myNewChart.scale.xLabels.map(e => '') (shows x-axis gridlines), to hide x-axis labels.
Example
var lineOptions = {
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether the line is curved between points
bezierCurve: true,
//Number - Tension of the bezier curve between points
bezierCurveTension: 0.4,
//Boolean - Whether to show a dot for each point
pointDot: true,
//Number - Radius of each point dot in pixels
pointDotRadius: 4,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth: 1,
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
pointHitDetectionRadius: 20,
//Boolean - Whether to show a stroke for datasets
datasetStroke: true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth: 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill: true,
//Boolean - Re-draw chart on page resize
responsive: true,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};
var lineData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var getElement = document.getElementById("departuresChart2");
var ctx = getElement.getContext("2d");
myNewChart = new Chart(ctx).Line(lineData, lineOptions);
myNewChart.scale.xLabels = []; //or set -> myNewChart.scale.xLabels.map(e => '');
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="departuresChart2"></canvas>
I am trying to implement a chart of the chart.js library into my view. However, i am not able to display the chart as desired.
The particular part in my razor view:
<div class="col-md-8">
<p class="text-center">
<strong>Energy Consumption and Production: 1 Jan, 2016 - 30 Jul, 2016</strong>
</p>
<div class="chart-responsive">
<canvas id="trendChart" width="800" height="400"></canvas>
</div> #*/.chart-responsive*#
My Javascript code regarding the line chart:
$(function () {
var datachart = {
labels: [],
datasets: [
{
label: "Consumption",
backgroundColor: "rgba(215,220,67,0.3)",
borderColor: "rgba(220,220,220,0.7)",
borderWidth: 1,
hoverBackgroundColor: "rgba(220,220,220,1)",
hoverBorderColor: "rgba(220,220,220,0.5)",
data: []
},
{
label: "Production",
backgroundColor: "rgba(90,193,208,0.3)",
borderColor: "rgba(151,187,205,0.7)",
borderWidth: 1,
hoverBackgroundColor: "rgba(151,187,205,1)",
hoverBorderColor: "rgba(151,187,205,0.5)",
data: []
}
]
};
var trendChartOptions = {
//Boolean - If we should show the scale at all
showScale: true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: false,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - Whether the line is curved between points
bezierCurve: true,
//Number - Tension of the bezier curve between points
bezierCurveTension: 0.3,
//Boolean - Whether to show a dot for each point
pointDot: false,
//Number - Radius of each point dot in pixels
pointDotRadius: 4,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth: 1,
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
pointHitDetectionRadius: 20,
//Boolean - Whether to show a stroke for datasets
datasetStroke: true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth: 2,
//Boolean - Whether to fill the dataset with a color
datasetFill: true,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%=datasets[i].label%></li><%}%></ul>",
//Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: false,
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>",
//Boolean - whether to make the chart responsive to window resizing
responsive: true
};
$.getJSON("/AdminLte/GetData", function (data) {
$.each(data, function (i, item) {
datachart.labels.push(item._DATE);
datachart.datasets[0].data.push(item.CONSUMPTION);
datachart.datasets[1].data.push(item.PRODUCTION);
})
});
var ctx = new Chart(document.getElementById("trendChart").getContext("2d")).Line(datachart, trendChartOptions);
});
And my controller method for dynamically filling the data:
public ContentResult GetData()
{
List<MeterDataTrendViewModel> meterDataTrend = new List<MeterDataTrendViewModel>();
var result =
from s in db.MeterDatas.ToList()
group s by new { s._DATE } into g
select new
{
read_date = g.Key._DATE,
CONSUMPTION = g.Sum(x => Convert.ToInt64(x.CONSUMPTION)),
PRODUCTION = g.Sum(x => Convert.ToInt64(x.PRODUCTION))
};
foreach(var res in result)
{
MeterDataTrendViewModel mdv = new MeterDataTrendViewModel();
mdv._DATE = res.read_date;
mdv.CONSUMPTION = res.CONSUMPTION.ToString();
mdv.PRODUCTION = res.PRODUCTION.ToString();
meterDataTrend.Add(mdv);
}
return Content(JsonConvert.SerializeObject(meterDataTrend), "application/json");
}
I`ve already debugged my js code and the data and labels array is filled correctly therefore my controller action is called. But there is only one datetime string displayed vertically so i guess it´s maybe aligned to the y-axis?
I can also fill the chart with static data and it´s displayed correctly. I cant figure out why my dynamic data isn´t displayed the right way.
I've managed to resolve this problem on my own with the following modifications.
$.getJSON("/AdminLte/GetData", function (data) {
$.each(data, function (i, item) {
chartlabels[i] = item._DATE;
cons[i] = item.CONSUMPTION;
prod[i] = item.PRODUCTION;
})
var ctx = new Chart(document.getElementById("trendChart").getContext("2d")).Line(datachart, trendChartOptions);
});
});
I am working on web socket related project.In following snippet I am getting the data coming from the server. I want to use the this data(in str variable) into another function. Kindly suggest any solution. Thank you in advance.
/*ON RECEIVING MESSAGES VIA WEBSOCKET FROM THE SERVER***/
ws.onmessage = function (event) {
var mySpan = document.getElementById("messageGoesHere");
var mySpan2 = document.getElementById("messageGoesHere2");
var str = event.data;
var array = str.split('|');
mySpan.innerHTML = parseInt(array[2])
mySpan2.innerHTML = parseInt(array[3]);
};
$(function () {
//Here I want to print the data
// and I can easily use this data to my chart
var areaChartData = {
//labels: ["January", "February", "March", "April", "May", "June", "July"],
labels: ["10", "20", "30", "40", "50", "60", "100"],
datasets: [{
label: "Digital Goods",
fillColor: "rgba(60,141,188,0.9)",
strokeColor: "rgba(60,141,188,0.8)",
pointColor: "#3b8bba",
pointStrokeColor: "rgba(60,141,188,1)",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(60,141,188,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var areaChartOptions = {
showScale: true,
scaleShowGridLines: false,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - Whether the line is curved between points
bezierCurve: true,
//Number - Tension of the bezier curve between points
bezierCurveTension: 0.3,
//Boolean - Whether to show a dot for each point
pointDot: false,
//Number - Radius of each point dot in pixels
pointDotRadius: 4,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth: 1,
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
pointHitDetectionRadius: 20,
//Boolean - Whether to show a stroke for datasets
datasetStroke: true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth: 2,
//Boolean - Whether to fill the dataset with a color
datasetFill: true,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
//Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,
//Boolean - whether to make the chart responsive to window resizing
responsive: true
};
//-------------
//- LINE CHART -
//--------------
var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
alert(lineChartCanvas);
var lineChart = new Chart(lineChartCanvas);
var lineChartOptions = areaChartOptions;
lineChartOptions.datasetFill = false;
lineChart.Line(areaChartData, lineChartOptions);
});
Do you mean something like this?
var mySpan = document.getElementById("messageGoesHere");
var mySpan2 = document.getElementById("messageGoesHere2");
function myCallback(event) {
var str = event.data;
var array = str.split('|');
mySpan.innerHTML = parseInt(array[2])
mySpan2.innerHTML = parseInt(array[3]);
};
/*ON RECEIVING MESSAGES VIA WEBSOCKET FROM THE SERVER***/
ws.onmessage = myCallback;
How can I draw an vertical line at a particular point on the x-axis using Chart.js?
In particular, I want to draw a line to indicate the current day on a LineChart. Here's a mockup of the chart:
http://i.stack.imgur.com/VQDWR.png
Update - this answer is for Chart.js 1.x, if you are looking for a 2.x answer check the comments and other answers.
You extend the line chart and include logic for drawing the line in the draw function.
Preview
HTML
<div>
<canvas id="LineWithLine" width="600" height="400"></canvas>
</div>
Script
var data = {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [{
data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
}]
};
var ctx = document.getElementById("LineWithLine").getContext("2d");
Chart.types.Line.extend({
name: "LineWithLine",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var point = this.datasets[0].points[this.options.lineAtIndex]
var scale = this.scale
// draw line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
this.chart.ctx.strokeStyle = '#ff0000';
this.chart.ctx.lineTo(point.x, scale.endPoint);
this.chart.ctx.stroke();
// write TODAY
this.chart.ctx.textAlign = 'center';
this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12);
}
});
new Chart(ctx).LineWithLine(data, {
datasetFill : false,
lineAtIndex: 2
});
The option property lineAtIndex controls which point to draw the line at.
Fiddle - http://jsfiddle.net/dbyze2ga/14/
Sharing my solution for chartjs.org version 2.5. I wanted to use a plugin, to make the implementation reusable.
const verticalLinePlugin = {
getLinePosition: function (chart, pointIndex) {
const meta = chart.getDatasetMeta(0); // first dataset is used to discover X coordinate of a point
const data = meta.data;
return data[pointIndex]._model.x;
},
renderVerticalLine: function (chartInstance, pointIndex) {
const lineLeftOffset = this.getLinePosition(chartInstance, pointIndex);
const scale = chartInstance.scales['y-axis-0'];
const context = chartInstance.chart.ctx;
// render vertical line
context.beginPath();
context.strokeStyle = '#ff0000';
context.moveTo(lineLeftOffset, scale.top);
context.lineTo(lineLeftOffset, scale.bottom);
context.stroke();
// write label
context.fillStyle = "#ff0000";
context.textAlign = 'center';
context.fillText('MY TEXT', lineLeftOffset, (scale.bottom - scale.top) / 2 + scale.top);
},
afterDatasetsDraw: function (chart, easing) {
if (chart.config.lineAtIndex) {
chart.config.lineAtIndex.forEach(pointIndex => this.renderVerticalLine(chart, pointIndex));
}
}
};
Chart.plugins.register(verticalLinePlugin);
Usage is simple then:
new Chart(ctx, {
type: 'line',
data: data,
label: 'Progress',
options: options,
lineAtIndex: [2,4,8],
})
The code above inserts red vertical lines at positions 2,4 and 8, running through points of first dataset at those positions.
I'd highly recommend to use the Chartjs-Plugin-Annotation.
An example can be found at CodePen
var chartData = {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [
{
data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
}
]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, {
type: "line",
data: chartData,
options: {
annotation: {
annotations: [
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: "MAR",
borderColor: "red",
label: {
content: "TODAY",
enabled: true,
position: "top"
}
}
]
}
}
});
};
Have a look here for more Details: https://stackoverflow.com/a/36431041
I had to go through the trouble of figuring out how to do something similar with ChartJS 2.0 so I thought I would share.
This is based on the new way of overriding a chart prototype as explained here: https://github.com/chartjs/Chart.js/issues/2321
var ctx = document.getElementById('income-chart');
var originalDraw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function (ease) {
originalDraw.call(this, ease);
var point = dataValues[vm.incomeCentile];
var scale = this.chart.scales['x-axis-0'];
// calculate the portion of the axis and multiply by total axis width
var left = (point.x / scale.end * (scale.right - scale.left));
// draw line
this.chart.chart.ctx.beginPath();
this.chart.chart.ctx.strokeStyle = '#ff0000';
this.chart.chart.ctx.moveTo(scale.left + left, 0);
this.chart.chart.ctx.lineTo(scale.left + left, 1000000);
this.chart.chart.ctx.stroke();
// write label
this.chart.chart.ctx.textAlign = 'center';
this.chart.chart.ctx.fillText('YOU', scale.left + left, 200);
};
With chart.js 3.8.0 I've used a combo between line/bar chart with timeline (xAxis) and percentage (yAxis). See docs
The dataset configuration provides a option to set the maxBarThickness (I've applied 2) and then apply the max value of the y-axis on each data entry of the bar chart.
Example of dataset configuration:
datasets: [
{
type: 'line'
data: [
{x: "2022-07-18", y: 10},
{x: "2022-07-19", y: 60},
{x: "2022-07-20", y: 30}
],
....
},
{
type: 'bar',
data: [
{x: "2022-07-19", y: 100}
],
maxBarThickness: 2,
...
}
]
Example of the output:
Here's a pen that achieves a similar effect without the chartjs-plugin-annotation, or hacking how Chart.js renders, or any other plugins: https://codepen.io/gkemmey/pen/qBWZbYM
Approach
Use a combo bar / line chart, and use the bar chart to draw the vertical lines.
Use two y-axes: one for the bar chart (which we don't display), and one for all your other line chart datasets.
Force the bar chart y-axes to min: 0 and max: 1. Anytime you want to draw a vertical line, add a data object like { x: where_the_line_goes, y: 1 } to your bar chart dataset.
The pen also adds some custom data to the bar chart dataset and a legend filter and label callback to exclude the bar chart dataset from the legend, and control the label on the vertical line.
Pros
No other dependencies. No custom monkey patching / extending.
The annotations plugin doesn't seem to be actively maintained. For instance, atm, their event handlers throw an error about "preventing default on passive events"
Maybe a pro: The annotations plugin always shows the labels of lines drawn, and you have to use their event callbacks to get a show-on-hover effect. Chart.js tooltips show on hover by default.
Cons
We're adding custom data in the dataset config, and hoping it doesn't conflict with anything Chart.js is doing. It's data Chart.js doesn't expect to be there, but as of 2.8, also doesn't break it.
Enhanced version of #Tomáš Dvořák answer
Supports:
custom text for labels
custom color for line+label
custom alignment for labels
custom X/Y offset for labels
const verticalLinePlugin = {
getLinePosition: function (chart, pointIndex) {
const meta = chart.getDatasetMeta(0); // first dataset is used to discover X coordinate of a point
const data = meta.data;
return data[pointIndex]._model.x;
},
renderVerticalLine: function (chartInstance, pointIndex, label, color, alignment, xOffset, yOffset) {
const lineLeftOffset = this.getLinePosition(chartInstance, pointIndex);
const scale = chartInstance.scales['y-axis-0'];
const context = chartInstance.chart.ctx;
if (xOffset == undefined) xOffset = 0;
if (yOffset == undefined) yOffset = 0;
// render vertical line
context.beginPath();
context.strokeStyle = color;
context.moveTo(lineLeftOffset, scale.top);
context.lineTo(lineLeftOffset, scale.bottom);
context.stroke();
// write label
context.fillStyle = color;
context.textAlign = alignment;
context.fillText(label, lineLeftOffset + xOffset, (scale.bottom - scale.top) / 2 + scale.top + yOffset);
},
afterDatasetsDraw: function (chart, easing) {
if (chart.config.lineAtIndex) {
labelIndex = 0;
chart.config.lineAtIndex.forEach((pointIndex) => {
if (chart.config.verticalLinesLabels != undefined) { // if array of labels exists...
label = chart.config.verticalLinesLabels[labelIndex]; // chart.config.verticalLinesLabels must contain all elements; use elements ="" for lines not requiring labels
color = chart.config.verticalLinesColors[labelIndex]; // chart.config.verticalLinesColors must contain all elements
alignment = chart.config.verticalLinesAlignments[labelIndex]; // chart.config.verticalLinesAlignments must contain all elements
xOff = chart.config.verticalLinesX[labelIndex]; // chart.config.verticalLinesX must contain all elements
yOff = chart.config.verticalLinesY[labelIndex]; // chart.config.verticalLinesY must contain all elements
} else {
label = "";
}
this.renderVerticalLine(chart, pointIndex, label, color, alignment, xOff, yOff)
labelIndex++;
});
}
}
};
Chart.plugins.register(verticalLinePlugin);
Usage:
myChart.config.verticalLinesLabels = ["aaa", "bbb", "ddd"];
myChart.config.verticalLinesColors = ["#FF0000", 'rgb(0,255,0)', 'rgba(0,0,255,0.5)'];
myChart.config.verticalLinesAlignments = ["left", "center", "right"]; // Set label aligment (note: it is inverted because referred to line, not to label)
myChart.config.verticalLinesX = [10,5,0]; // Set label X offset
myChart.config.verticalLinesY = [10,5,0]; // Set label Y offset
myChart.config.lineAtIndex = [10,30,50]; // Mandatory to enable all previous ones
myChart.update()