Right now the callbacks (on hover) show the data from data set. I want to change each of that point with a different value. For that I have a same size array as the original data array.
I tried this
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return measures;
}
}
},
but it returned the whole array for every point.
The chart can have more then 1 datasets. They are created dynamically in a for loop. I tried creating the callbacks dynamically as well
call[r] = {
abel: function(tooltipItem, data) {
return measures;
}
};
tooltips: {
callbacks: call
},
But that just threw TypeErrors
TypeError: c.callbacks.labelColor is undefined
TypeError: e.title is undefined
How can i get each array element on a different point? And in case of multiple datasets show the values from the same position array as dataset?
Sorry if im not clear enough. Just cant quite wrap my head around this.
Thanks!
I have implemented graph in one of my project for Power On Time duration. I have refered you with my code. Please see if it can help.
Labels Array:
Array(9)
0
:
"2018-09-17"
1
:
"2018-09-17"
2
:
"2018-09-17"
3
:
"2018-09-17"
4
:
"2018-09-17"
5
:
"2018-09-17"
6
:
"2018-09-17"
7
:
"2018-09-17"
8
:
"2018-09-18"
Data Array:
Array(9)
0
:
"200"
1
:
"211"
2
:
"234"
3
:
"255"
4
:
"300"
5
:
"321"
6
:
"400"
7
:
"421"
8
:
"00421"
<script>
var powerontimedata_chart_labels=[];
var powerontimedata_chart_data=[];
function initiateChart(labels, data){
chart_labels=JSON.parse(labels);
chart_data=JSON.parse(data);
console.log(powerontimedata_chart_labels);
console.log(powerontimedata_chart_data);
plotDataLineChart();
}
function plotDataLineChart(){
var lineChartOptions = {
maintainAspectRatio: false,
steppedLine : 'after',
responsive : true,
showTooltips : false,
showInlineValues : true,
centeredInllineValues : true,
tooltipCaretSize : 0,
tooltipTemplate : "<%= value %>",
scales: {
xAxes: [{
position: "right",
scaleLabel: {
display: true,
stepSize : 1,
autoSkip: false,
labelString: "Date",
fontFamily: "Montserrat",
fontColor: "black",
},
ticks:{
stepSize : 2,
autoSkip: true
}
}],
yAxes: [{
position: "left",
scaleLabel: {
display: true,
stepSize : 1,
autoSkip: false,
labelString: "Time in Hour",
fontFamily: "Montserrat",
fontColor: "black",
},
ticks: {
beginAtZero:true,
autoSkip: true
}
}]
},
"animation": {
"duration": 1,
"onComplete": function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
console.log(ctx);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = '#ff0000';
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
//multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
};
var lineChartCanvas = $('#weekbarChart').get(0).getContext('2d')
var ontime = {
labels : chart_labels,
datasets : [
{
label : 'Power Ontime',
fill : true,
borderColor : "#FF0000",
backgroundColor : "#F5B7B1",
data : powerontimedata_chart_data,
steppedLine: false,
pointStyle: 'clearInterval',
pointBorderColor : "#FF0000",
}
]
}
realTimeChart = new Chart(lineChartCanvas, {
type: 'line',
data: ontime,
options: lineChartOptions
});
}
initiateChart('<?= json_encode($chart["labels"])?>','<?= json_encode($chart["data"])?>');
</script>
And my graph comes out to be :
Related
I have been looking around for a way to add the value inside each bar in a horizontal bar chart, using chart.js but all posts seem to show how to add the label. Tooltip shows both label and value but I wanted to show the value so users can see the result without having to mouse-over the bar.
I put break points in the script to see if there is any property of "model" that contains the value but couldn't find one.
This is how I set up the chart including the animation section that shows the label instead of the value.
Dataset comes from an ajax call and chart is displayed in its onSuccess:
function OnSuccess_(response) {
var jResult = JSON.parse(response.d);
var chartLabels = [];
var chartData = []
$.each(jResult, function (index, val) {
chartLabels.push(val.TIMERANGE);
chartData.push(val.COUNT); // <--- This is what I want to display on each bar
});
var ctx = document.getElementById("rtChart").getContext("2d");
if (chartRespTime)
chartRespTime.destroy();
chartRespTime = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: chartLabels,
datasets: [{
label: "Response Time (ms)",
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
data: chartData
}]
},
options: {
title: {
display: true,
text: 'Database Response Time (milli-seconds)'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Count'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Response Time (ms)'
}
}]
},
animation: {
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
ctx.fillStyle = '#444'; // label color
var label = model.label; // <--- need value not label
ctx.fillText(label, left + 15, model.y + 8);
}
});
}
},
maintainAspectRatio: false,
responsive: true,
showInlineValues: true,
centeredInllineValues: true,
tooltipCaretSize: 0
}
});
//console.log(ctx);
$('#rtChart').show();
}
There is no build in way to do this, but there is a verry good plugin that achieves what you want: the datalabels plugin https://chartjs-plugin-datalabels.netlify.app/samples/charts/bar.html
How can I move my labels on my x axes in between another x axes label. Nothing seems to work and I was unable to find anything on the docs. Is there a workaround? I'm using line chart time series.
https://www.chartjs.org/samples/latest/scales/time/financial.html
Currently, with the code I have its generating the figure below:
var cfg = {
elements:{
point: {
radius: 4
}
},
data: {
datasets: [
{
label: 'vsy',
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
data: firstData,
type: 'line',
pointRadius: 2,
fill: false,
lineTension: 0,
borderWidth: 2
},
{
label: 'de vsy',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
data: dataMaker(15),
type: 'line',
pointRadius: 2,
fill: false,
lineTension: 0,
borderWidth: 2
}
],
},
options: {
animation: {
duration: 0
},
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
offset: true,
time: {
unit: 'month',
displayFormats: {
month: 'MMM'
}
},
ticks: {
autoSkip: true,
autoSkipPadding: 75,
sampleSize: 100
},
}],
yAxes: [{
gridLines: {
drawBorder: false
}
}]
},
tooltips: {
intersect: false,
mode: 'index',
}
}
};
This is what I have now:
I want the labels on the x-axis to be on center instead of below the y axis grid line.
Thanks to uminder, with his comment it solves the issue but now I have a conflicting tooltip which lie on a same grid. When I hover to april line first point it shows me mar 30 which lies just above it and vice versa.
I fixed it by changing the mode to nearest but why is it activating the another point?
The option you're looking for is offsetGridLines.
If true, grid lines will be shifted to be between labels.
xAxes: [{
...
gridLines: {
offsetGridLines: true
}
In most cases, this produces the expected result. Unfortunately it doesn't work for time axes as documented in Chart.js issue #403. Thanks to Antti Hukkanen, there exists a workaround.
Please have a look at below runnable code snippet to see how it works.
function generateData() {
var unit = 'day';
function randomNumber(min, max) {
return Math.random() * (max - min) + min;
}
function randomPoint(date, lastClose) {
var open = randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2);
var close = randomNumber(open * 0.95, open * 1.05).toFixed(2);
return {
t: date.valueOf(),
y: close
};
}
var date = moment().subtract(1, 'years');
var now = moment();
var data = [];
for (; data.length < 600 && date.isBefore(now); date = date.clone().add(1, unit).startOf(unit)) {
data.push(randomPoint(date, data.length > 0 ? data[data.length - 1].y : 30));
}
return data;
}
var TimeCenterScale = Chart.scaleService.getScaleConstructor('time').extend({
getPixelForTick: function(index) {
var ticks = this.getTicks();
if (index < 0 || index >= ticks.length) {
return null;
}
// Get the pixel value for the current tick.
var px = this.getPixelForOffset(ticks[index].value);
// Get the next tick's pixel value.
var nextPx = this.right;
var nextTick = ticks[index + 1];
if (nextTick) {
nextPx = this.getPixelForOffset(nextTick.value);
}
// Align the labels in the middle of the current and next tick.
return px + (nextPx - px) / 2;
},
});
// Register the scale type
var defaults = Chart.scaleService.getScaleDefaults('time');
Chart.scaleService.registerScaleType('timecenter', TimeCenterScale, defaults);
var cfg = {
data: {
datasets: [{
label: 'CHRT - Chart.js Corporation',
backgroundColor: 'red',
borderColor: 'red',
data: generateData(),
type: 'line',
pointRadius: 0,
fill: false,
lineTension: 0,
borderWidth: 2
}]
},
options: {
animation: {
duration: 0
},
scales: {
xAxes: [{
type: 'timecenter',
time: {
unit: 'month',
stepSize: 1,
displayFormats: {
month: 'MMM'
}
},
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
gridLines: {
drawBorder: false
}
}]
},
tooltips: {
intersect: false,
mode: 'index'
}
}
};
var chart = new Chart('chart1', cfg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart1" height="90"></canvas>
For chartJs v3 you can use offset property:
scales: {
x: {
grid: {
offset: true
}
},
...
}
I have chart witch i need show up value on top each bar, and i need show tooltip too, so i try these code
var ctx3 = document.getElementById('canvasppicinh').getContext('2d');
window.myMixedChart = new Chart(ctx3, {
type: 'bar',
data: chartData,
options: {
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart KPI Financial Perfective',
padding: 50
},
legend :{
position : 'bottom'
},
tooltips: {
mode: 'index',
intersect: true,
enabled: true,
callbacks: {
label: function(tooltipItem, data) {
var val = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") +',-';
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
categoryPercentage: 1.0
},
gridLines: {
display: false
}
}]
},
hover: {
mode: false
},
animation: {
duration : 1,
onProgress: function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
}
}
});
Well is kinda work for me, my chart show value on top each bar but my problem is, everytime i try show tooltip value on top disappear. If tooltip disappear (not hovering) top value appearing. Did i miss something? And I have searching these problem on google, it said i need extend. But i don't have any idea how to use extend with my oldest code. Please help me.
I found the solution you need plugin chartjs-plugin-datalabels, and add inside option chart
plugins: {
datalabels: {
color: 'white',
formatter: function(value, context) {
return Math.round(value) + '%';
}
}
}
And remove animation
I am working with chart.js and am trying to add 2 plugins to the same chart, but when applied, both of the plugins disappear and there is no direct error in the console.
Does anyone know how to implement two plugins to the same graph?
First pulgin
Second plugin referance
Basically, the graph has to show data labels on a line chart and at the same time, draw yAxis lines, but only starting from the points on the line chart.
For some reason, the chart will not show either of them when both are applied.
Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
color : '#ffffff'
})
// Chart.plugins.unregister(ChartDataLabels);
// var chart = new Chart(ctx, {
// / plugins: [ChartDataLabels],
// options: {
// // ...
// }
// })
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type : 'line',
// The data for our dataset
data : {
labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
datasets : [ {
label : 'My first dataset',
borderWidth : 3,
borderColor : 'rgb(255,0, 0)',
data : data1,
} ]
},
// Configuration options go here
options : {
elements : {
point : {
radius : 3
}
},
legend : {
display : false,
labels : {
fontColor : "white",
fontSize : 18
}
},
scales : {
yAxes : [ {
ticks : {
fontSize : 0,
beginAtZero : false,
max : 40,
},
gridLines : {
display : false,
drawBorder : false,
}
} ],
xAxes : [ {
ticks : {
fontColor : "white",
fontSize : 14,
beginAtZero : 0,
},
gridLines : {
display : false,
}
} ]
},
plugins : [ { // this is the magical bit :)
afterRender : function(c, options) {
let
meta = c.getDatasetMeta(0), max;
c.ctx.save();
c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
c.ctx.beginPath();
meta.data
.forEach(function(e) {
if (max == undefined
|| c.config.data.datasets[0].data[e._index] > max) {
max = c.config.data.datasets[0].data[e._index];
}
c.ctx.moveTo(e._model.x,
meta.dataset._scale.bottom);
c.ctx
.lineTo(e._model.x,
e._model.y);
});
c.ctx.textBaseline = 'top';
c.ctx.textAlign = 'right';
c.ctx.fillStyle = 'black';
c.ctx.fillText('Max value: ' + max,
c.width - 10, 10);
c.ctx.stroke();
c.ctx.restore();
}
} ],
tooltips : {
callbacks : {
label : function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}
});
var data1 = [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ];
myChart(data1);
HTML .js code
<script src="js/chart.js"></script>
<!-- data label .js -->
<script
src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.5.0"></script>
<!-- yAxis lines .js -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
var chart = new Chart(document.getElementById('chart'), {
type : 'line',
data : {
labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
datasets : [ {
label : 'My first dataset',
borderWidth : 1,
borderColor : 'rgb(255,0, 0)',
data : [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ],
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: 'rgb(255, 120, 12, .2)',
borderRadius: 20
}
}]
},
options : {
scales : {
xAxes : [ {
gridLines : {
display : false,
color: 'rgba(255, 120, 12, .2)',
lineWidth: 5
}
} ],
yAxes : [{
gridLines : {
display : false,
color: 'rgba(255, 120, 12, .2)',
lineWidth: 5
},
ticks : {
beginAtZero: true
}
}]
},
},
plugins : [{ // this is the magical bit :)
afterRender : function(c, options) {
let meta = c.getDatasetMeta(0), max;
c.ctx.save();
c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
c.ctx.beginPath();
meta.data.forEach(function(e)
{
if (max == undefined || c.config.data.datasets[0].data[e._index] > max) {
max = c.config.data.datasets[0].data[e._index];
}
c.ctx.moveTo(e._model.x,meta.dataset._scale.bottom);
c.ctx.lineTo(e._model.x,e._model.y);
});
c.ctx.textBaseline = 'top';
c.ctx.textAlign = 'right';
c.ctx.fillStyle = 'black';
c.ctx.fillText('Max value: ' + max, c.width - 10, 10);
c.ctx.stroke();
c.ctx.restore();
}
}],
tooltips : {
callbacks : {
label : function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
});
>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.6.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chart"></canvas>
I have these bar charts that will sometimes show zero values to the user. I'd like to show a bit of the bar chart so it does not look completely empty, but the data is connected to the visual representation of the bar. Is there any way I could have the top number say zero but the value be 3(or something small) in each column? Here is the code and a screenshots. One screenshot has data, the other is zero. I'd like the zero graph to show just a bit of the orange and green when at zero. Thanks
<canvas id="bar-chart" width="900" height="350"></canvas>
<script type="text/javascript">
var ctx = document.getElementById("bar-chart");
debugger;
var data = {
labels: ["Page Views", "Data Requests"],
datasets: [{
data: [<?php echo $databaseClass->totalViewsSelectedMonth($user_id, $year, 1);
?>, <?php
echo $databaseClass->isRfYearMonth($user_id, $year, 1);
?>],
backgroundColor: ["orange", "green"]
}]
}
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
"hover": {
"animationDuration": 0
},
"animation": {
"duration": 1,
"onComplete": function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
legend: {
"display": false
},
tooltips: {
"enabled": false
},
scales: {
yAxes: [{
display: false,
gridLines: {
display: false
},
ticks: {
max: Math.max(...data.datasets[0].data) + 20,
display: false,
beginAtZero: true
}
}],
xAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
It looks like you can update the axes of your charts to a new default. So, using a modified form of their example, something like the following (modified to fit your code):
// ...
scales: {
yAxes: [{
display: false,
gridLines: {
display: false
},
ticks: {
max: Math.max(...data.datasets[0].data) + 20,
min: -3, // ADDED
display: false,
beginAtZero: true
}
}],
// ...
... would do what you're looking for - with the side benefit that 0 and 3 wouldn't look like the same value, the relative bar size should stay accurate.