We Keep Coding

ChartJS Tooltip Customization

I'm running ChartJS 2.7.something, and have https://codepen.io/anon/pen/YBJWKX this graph. Code below:
var ctx = document.getElementById("chart");
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) { Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
let activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
topY = this.chart.scales['y-axis-a'].top,
bottomY = this.chart.scales['y-axis-a'].bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(52,58,64,1)';
ctx.stroke();
ctx.restore();
}
}
});
var dashboard = new Chart(ctx, {
type: 'bar',
data: {
responsive: true,
labels: ["1", "2", "3", "4", "5", "6", "7"],
datasets: [{
label: 'No Data',
yAxisID: 'y-axis-a',
data: [null,null,4000, null, null, 4000, null],
backgroundColor: 'rgba(229,229,229,1)',
borderWidth: '0',
borderSkipped: 'bottom',
hoverBackgroundColor: 'rgba(229,229,229,1)',
hoverBorderWidth: '0',
showTooltip: false,
},
{
type: 'LineWithLine',
label: 'Dummy 1',
fill: false,
yAxisID: 'y-axis-a',
data: [2586, 2343, 2380, 2439, 3316, 1570, 3439],
borderColor: 'rgba(220,53,69,1)',
backgroundColor: 'rgba(220,53,69,1)',
borderWidth: 3,
borderCapStyle: 'butt',
pointRadius: 2,
pointBorderWidth: 0,
pointHoverRadius: 1,
pointHitRadius: 10,
lineTension: 0.1, // Removes Bezier on Line
},
{
type: 'LineWithLine',
label: 'Dummy 2',
fill: false,
yAxisID: 'y-axis-a',
data: [3466, 1295, 3015, 2351, 3305, 1167, 1350],
borderColor: 'rgba(40, 167, 69,1)',
backgroundColor: 'rgba(40, 167, 69,1)',
borderWidth: 3,
borderCapStyle: 'butt',
pointRadius: 2,
pointBorderWidth: 0,
pointHoverRadius: 1,
pointHitRadius: 10,
lineTension: 0.1, // Removes Bezier on Line
},
{
type: 'LineWithLine',
label: 'Dummy 3',
fill: false,
yAxisID: 'y-axis-b',
data: [1, 8, 17, 6, 12, 4, 7],
borderColor: 'rgba(0, 123, 255,1)',
backgroundColor: 'rgba(0, 123, 255,1)',
borderWidth: 3,
borderCapStyle: 'butt',
pointRadius: 2,
pointBorderWidth: 0,
pointHoverRadius: 1,
pointHitRadius: 10,
lineTension: 0.1, // Removes Bezier on Line
},
]
},
options: {
bezierCurve: false,
maintainAspectRatio:false,
legend: {
labels: {
filter: function(item, dashboard) {
// Logic to remove a particular legend item goes here
return !item.text.includes('No Data');
}
}
},
tooltips: {
mode: 'index',
intersect: false,
//enabled: false,
},
scales: {
yAxes: [{
position: "left",
id: "y-axis-a",
ticks: {
suggestedMax: 3600,
}
},
{
position: "left",
id: "y-axis-b",
max: 25,
display: false,
gridLines: {
display:false
}
}],
},
xAxes: [{ }]
}
});
It's almost perfect for what i need it for, however:
In this particular case I would like to remove the "No Data" grey bars from the tooltip where it's values are NULL.
At the same time, i would also like to remove the tooltip entirely where it's value is not NULL, ie disabled.
I'm using the tooltip in index mode with intersect turned to false so that the black line that is on the graph works, the black line came from this question.
I've tried a range of things from stackoverflow, but I have a feeling that none of the things i've tried have worked because of how the tooltip is set up.
Is it at all possible to do what I need here?

Just change your options parameter a little bit.
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
//returns a empty string if the label is "No Data"
label: function(items, data){
let dataset = data.datasets[items.datasetIndex];
if(dataset.label !== "No Data") {
return `${dataset.label}: ${items.yLabel}`
} else {
return ""
}
},
//only returns something when at least one dataset yLabel is a valid number.
title: function(t, e) {
let shouldDisplay = false;
t.forEach((it) => {
if(!isNaN(it.yLabel)) shouldDisplay = true;
});
if(shouldDisplay) {
return t[0].xLabel;
}
}
}
},
There is probably a better way to optimize this, but I hope it helps

Where do i add the begin at zero (chart.js)

I've made two charts, one line chart and one bar-chart, that you can switch between and the charts contains different data. The problem is that I can't seem to make them begin at zero? Where in the script do I put the code so both charts begin at zero, because now it just doesn't work or the whole bar just disappears.
<script>
let lineConfig = {
type: 'line',
data: {
labels: ["2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: "Miljoner ton",
data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
lineTension: 0.1,
backgroundColor: "rgba(0,255,0,0.4)",
borderColor: "green", // The main line color
borderCapStyle: 'square',
pointBorderColor: "white",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "green",
pointHoverBorderWidth: 2,
pointRadius: 4,
}]
}
},
barConfig = {
type: 'bar',
data: {
labels: ['Palmolja', "Sojaolja", 'Animaliskt fett', 'Solrosolja', 'Rapsolja', 'Annat'],
datasets: [{
label: "Procent",
data: [28.6, 25.3, 13.2, 8.0, 12.2, 9.6],
backgroundColor: "rgba(0,255,0,0.4)",
borderColor: "green", // The main line color
borderCapStyle: 'square',
pointBorderColor: "white",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "green",
pointHoverBorderWidth: 2,
pointRadius: 4,
}]
}
},
activeType = 'bar', // we'll start with a bar chart.
myChart;
function init(config) {
// create a new chart with the supplied config.
myChart = new Chart(document.getElementById('chart'), config);
}
// first init as a bar chart.
init(barConfig);
document.getElementById('switch').addEventListener('click', function(e) {
// every time the button is clicked we destroy the existing chart.
myChart.destroy();
if (activeType == 'bar') {
// chart was a bar, init a new line chart.
activeType = 'line';
init(lineConfig);
return;
}
// chart was a line, init a new bar chart.
activeType = 'bar';
init(barConfig);
});
</script>

Assuming you mean for your linear y-axis then the documentation specifies the following:
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
Edit as per OP comment:
The options property is a sibling of type and data, e.g.:
{
type: 'line',
data: {
labels: [...],
datasets: [{
data: [...]
}]
},
options: {
...
}
}

ChartJS: Show all labels of a mixed chart in the tooltip

I have the below mixed chart, with bars & lines:
Below the code that generate the above chart:
var data = [{
label: 'Varience 1',
data: [15, -6, -6, 7],
borderColor: '#03A9F4',
pointBackgroundColor: '#03A9F4',
pointBorderWidth: 2,
pointStyle: 'rect',
type: 'line',
steppedLine: true,
borderWidth: 2
}, {
label: 'Varience 2',
data: [24, -2, 3, 19],
borderColor: '#FF5722',
pointBackgroundColor: '#FF5722',
pointBorderWidth: 2,
pointStyle: 'rect',
type: 'line',
steppedLine: true,
borderWidth: 2
}, {
label: 'Available',
data: [72, 62, 55, 65],
borderDash: [5, 5],
borderColor: '#bbb',
pointBackgroundColor: '#bbb',
pointBorderWidth: 2,
borderWidth: 2,
type: 'line'
}, {
label: 'Budget',
data: [50, 55, 45, 51],
borderDash: [5, 5],
borderColor: '#f0ab00',
pointBackgroundColor: '#fff',
pointBorderWidth: 2,
borderWidth: 2,
type: 'line'
}, {
label: 'Actual',
data: [65, 49, 39, 58],
backgroundColor: '#607D8B',
pointBorderWidth: 3,
borderWidth: 3
}, {
label: 'Last Year',
data: [41, 51, 36, 39],
borderColor: '#607D8B',
backgroundColor: 'rgba(96, 125, 139, 0.25)',
pointBorderWidth: 3,
borderWidth: 3
}];
data.forEach(function (obj) {
obj.fill = 'false';
});
Below the code to show the custom tooltip:
tooltips: {
callbacks: {
label: function tooltipWithoutTotal(tooltipItem, data) {
var type = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
return type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,');
} else {
return [type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,')];
}
}
}
}
With the above tooltip code I expected to list all the values in the tooltip (like this: https://jsfiddle.net/kingBethal/r23y0h6n/).
However, in the tooltip it is showing only individual values.
Here is the JSFiddle: https://jsfiddle.net/kingBethal/dqpusowy/6/

Set the tooltip interaction mode to index:
options = {
tooltips: {
mode: 'index'
}
}
Result:

The new syntax for Chart JS 3+ :
options: {
interaction: {
intersect: false,
mode: 'index',
}
}

Chart.js changing the color of the max value bar

I'm new to JS, I want to create a bar chart where the column with the max value has a different color compared to the others. I can create the chart but I don't manage to access the single column properties. I have been looking for answers on the web but none of the solutions I have found so far helped me. The workflow is the following:
I ask the user for a text input,
Once the user press a button the script calls a function in python (I use python flask) that returns me an array of values and labels,
Then a chart appears on the webpage with these values and labels.
Everything works fine, I'm just not able to change the color of a single bar.
Here is the JS:
$(function() {
$('a#process_input').bind('click', function() {
$.getJSON('/background_process', {
smile: $('input[name="text_string"]').val(),
}, function(data) {
$("#result").text(data.output);
var labels = data.labels;
var values = data.values;
Chart.defaults.global.responsive = false;
var chartData = {
labels : labels,
datasets : [{
label: 'data_label',
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data : values,
scaleShowLabels: true,
spanGaps: false
}]
}
// get chart canvas
var ctx = document.getElementById("myCanvas").getContext("2d");
// create the chart using the chart canvas
var myChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
scaleShowValues: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
}
});
});
});
});
Here is an example of what I mean:

I think the easiest way to do it is by defining backgroundColor for each bars. Then you can find the max index and change the color. Here is a simplified example:
function argMax(array) {
return array.map((x, i) => [x, i]).reduce((r, a) => (a[0] > r[0] ? a : r))[1];
}
// dummy data
var data = [12, 19, 1, 14, 3, 10, 9];
var labels = data.map((x, i) => i.toString());
// other data color
var color = data.map(x => 'rgba(75,192,192,0.4)');
// change max color
color[argMax(data)] = 'red';
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'value',
data: data,
backgroundColor: color,
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>
<canvas id="myChart" width="600" height="300"></canvas>

backgroundColor: "rgba(75,192,192,0.4)"
instead of giving it a single color, you can add an array:
backgroundColor:["rgba(255, 99, 132, 0.2)","rgba(255, 159, 64, 0.2)","rgba(255, 205, 86, 0.2)"]
Example:
new Chart(document.getElementById("chartjs-1"), {
"type": "bar",
"data": {
"labels": ["First", "Second", "Third", "Fourth"],
"datasets": [{
"label": "Example Dataset",
"data": [65, 59, 80, 31],
"fill": false,
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 99, 132, 0.2)", "rgba(255, 99, 132, 0.2)"],
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 99, 132)", "rgb(255, 99, 132)"],
"borderWidth": 1
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chartjs-1" class="chartjs">https://stackoverflow.com/posts/51843404/edit#
In the documentation [] denotes which properties accept also arrays (backgroundColor - Color/Color[])

How to hide tooltips with their respective dataset

I'm using charts.js. For my current need, I managed to find a way to configure tooltips to be always visible regardless of the hover event. My problem is that the tooltip visibility does not follow the dataset behaviour. On charts.js, you can click on a dataset in order to remove it from the graph. My graph does that, but the tooltips are still there visible, floating within the graph with no dataset to represent. Is there a way to hide then with the dataset data when the label is clicked ?
Here is an example of the current state of what i said. https://jsfiddle.net/CaioSantAnna/ddejheg0/ .
HTML
<canvas id="linha"></canvas>
Javascript
Chart.plugins.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
});
ctx = document.getElementById("linha");
var linha = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
responsive: true,
animation: true,
},
{
label: "Second dataset",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(0,0,0,0.4)",
borderColor: "rgba(0,0,0,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(0,0,0,1)",
pointHoverBorderColor: "rgba(0,0,0,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [13, 78, 60, 75, 90, 10, 27],
spanGaps: false,
responsive: true,
animation: true,
}
]
},
options: {
tooltips: {
callbacks: {
title: function (tooltipItem, data) { return "" },
label: function (tooltipItem, data) {
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
var label = data.labels[tooltipItem.index];
return value;
}
}
},showAllTooltips: true
}
});
To reproduce the problem, just click in one of the labels on the top of the graph.
Thanks in advance.

Just to close the question, I ended up changing to amcharts(https://www.amcharts.com/). It has features like the one i was trying to achieve with chart.js and is free to use under a linkware license.
Thanks again.