Is there a way so that one can disable the tool tips on one dataset on a Chart JS Chart and leave the tool tips present on the other dataset. Here is my current code:
var data = {
labels: [' . $labels . '],
datasets: [
{
label: "Portfolio Performance",
fillColor: "rgba(0,0,220,0.2)",
strokeColor: "rgba(0,220,220,1)",
pointColor: "rgba(0,0,0,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [' . $values . ']
},
{
label: "Portfolio Expendature",
fillColor: "rgba(0,0,220,0)",
strokeColor: "rgba(0,0,0,1)",
pointColor: "rgba(0,0,0,0)",
pointStrokeColor: "rgba(0,0,220,0)",
pointHighlightFill: "rgba(0,0,220,0)",
pointHighlightStroke: "rgba(220,220,220,0)",
data: [4450000,4450000,4450000,4450000,4450000]
}
]
};
var option = {
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= \'£\' + FormatNumberBy3(Number(value).toFixed(2), \'.\' , \',\') %>",
maintainAspectRatio: false,
bezierCurve: false,
responsive: true,
scaleLabel: "<%= \'£\' + FormatNumberBy3(Number(value), \'.\' , \',\') %>"
};
var ctx = document.getElementById("graph").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, option);
You can use custom tooltips to do this (basically you use an HTML element instead of using the canvas to render the tooltip alone). See https://github.com/nnnick/Chart.js/blob/v1.0.2/samples/line-customTooltips.html for an example for line charts.
In your case, you can adjust the loop at https://github.com/nnnick/Chart.js/blob/v1.0.2/samples/line-customTooltips.html#L68 to exclude / include the datasets as you see fit.
I make use of the custom tooltip configuration to achieve this(here it hides datasets that doesn't have "Income" label):
this.myChart = new Chart(this.ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: "Income",
data: data3
},
{
label: "Tax",
data: data1,
backgroundColor: "#3EAFD5"
},
{
label: "Expenses",
data: data2,
backgroundColor: "#D24B47"
}
]
},
options: {
responsive: true,
tooltips: {
custom: function(tooltipModel) {
if (tooltipModel.body && tooltipModel.body[0].lines && tooltipModel.body[0].lines[0].indexOf("Income") == -1) {
tooltipModel.opacity = 0;
}
}
}
}
}
Related
I'm trying to display a stacked bar chart on my web page, but it's not working.
I've tried to follow the documentation about data structure, but it seems not working. The two data are made from an Ajax call and built in js.
https://www.chartjs.org/docs/latest/general/data-structures.html
I've made a jsfiddle if you want to look at what I've done.
https://jsfiddle.net/batmine3/h4w02y5g/6/
let myData = [
{
x: 'value1',
critical: 1,
high: 2,
medium: 0,
low: 5
},
{
x: 'value2',
critical: 2,
high: 0,
medium: 5,
low: 0
}
];
let myLabels = ['value1', 'value2'];
let stackedBar = new Chart($('#chartContainer'), {
type: 'bar',
data: {
labels: myLabels,
datasets:
[
{
label: 'critical',
data: myData,
borderColor: '#d30000',
backgroundColor: '#d30000',
parsing: {
yAxisKey: 'critical'
}
},
{
label: 'high',
data: myData,
borderColor: '#e97000',
backgroundColor: '#e97000',
parsing: {
yAxisKey: 'high'
}
},
{
label: 'medium',
data: myData,
borderColor: '#ff9c56',
backgroundColor: '#ff9c56',
parsing: {
yAxisKey: 'medium'
}
},
{
label: 'low',
data: myData,
borderColor: '#ffd063',
backgroundColor: '#ffd063',
parsing: {
yAxisKey: 'low'
}
}
]
},
options: {
scales: {
x: {
stacked: true,
ridLines: {
display: false
}
},
y: {
stacked: true,
beginAtZero: true
}
}
}
});
So after, investigating styles and formatting, it was just a problem of versions.
The parse options were not present in version 2.8.
the automatic scaling of the y-axis does not seem to work properly. I have the following code:
<script>
$(function () {
var lineChartCanvas = $('#lineChart').get(0).getContext('2d')
var lineChartData = {
datasets: [
{
label: 'Digital Goods',
backgroundColor: 'rgba(60,141,188,0.9)',
borderColor: 'rgba(60,141,188,0.8)',
pointRadius: false,
pointColor: '#3b8bba',
pointStrokeColor: 'rgba(60,141,188,1)',
pointHighlightFill: '#ffffff',
pointHighlightStroke: 'rgba(60,141,188,1)',
data: {{data}}
},
]
}
var lineChartOptions = {
maintainAspectRatio: false,
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false,
}
}],
yAxes: [{
gridLines: {
display: false,
}
}]
}
}
var lineChart = new Chart(lineChartCanvas, {
type: 'line',
data: lineChartData,
options: lineChartOptions
})
});
enter image description here
The graphs yaxes goes till 5, however, there is no data bigger than 1. I would like it to be more precise (y-axes not higher than 1 or something). However, as this code is part of a bigger application, I cannot set a fixed max as the code differs per scenario.
I tried to add an example, however, the data is not exactly like that (orginially 8760 values) and in this example another problem comes up. My lib is jquery.min.js (https://jsfiddle.net/742ovrLm/)
I have searched through for the solution but I have found solution to pie charts only. For example this one : Chart.js v2: How to make tooltips always appear on pie chart?
I just want make the tooltip visible without hovering. I have tried registering new pluginService but its not working and its producing this error
Uncaught TypeError: Cannot read property 'call' of undefined
this is what I have so far
Chart.pluginService.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,
_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;
}
}
})
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
showAllTooltips: true
}
});
appreciate any helps tq
When using the latest stable version of Chart.js (2.9.3), it works with the following changes.
Instead of Chart.pluginService.register, use Chart.plugin.register
Instead of change _options : chart.options write _options : chart.options.tooltips
Please have a look at your amended code below.
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));
});
});
chart.options.tooltips.enabled = false; // turn off normal tooltips
}
},
afterDraw: function(chart, easing) {
if (chart.config.options.showAllTooltips) {
if (!chart.allTooltipsOnce) {
if (easing !== 1) {
return;
}
chart.allTooltipsOnce = true;
}
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
tooltip.initialize();
tooltip.update();
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
});
new Chart("chart", {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
showAllTooltips: true
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="100"></canvas>
I need build 2 lines charts with different sets of labels
here is example https://jsfiddle.net/o5dtzwn1/
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [1, 2, 3, 4, 5],
labels: [
'green',
'yellow',
'red',
'purple',
'blue',
]
}, {
data: [6, 7, 8],
labels: [
'a',
'b',
'c'
],
}, ]
},
options: {
responsive: true,
legend: {
display: false,
},
}
});
How can I do this?
Ok, that could help you, Now I have made different line chart with four different data with different counts.
Here i have made three label array and attached to tick callback function randomly.
You can choose whichever apropriate, but make sure bigger atrray lenth should come
in to data: { labels: label1}.
Check link enter link description here
var ctx = document.getElementById("myChart");
var label1 = ["aa", "bb", "cc", "dd", "ee", "ff", "gg"];
var label2 = ["1900", "1950", "1999", "2050"];
var label3 = ["AA", "BB", "CC", "DD", "EE"];
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: label1,
datasets: [{
label: "Europe",
type: "line",
borderColor: "#8e5ea2",
data: [408, 547, 675, 934],
fill: false
}, {
label: "Africa",
type: "line",
borderColor: "magenta",
data: [133, 221, 783, 2478, 1900, 1200],
fill: false
}, {
label: "Europe",
type: "line",
borderColor: "green",
data: [408, 547, 675, 734, 200],
fill: false
}, {
label: "Africa",
type: "line",
borderColor: "red",
//backgroundColorHover: "#3e95cd",
data: [133, 221, 783, 2478],
fill: false
}]
},
options: {
title: {
display: true,
text: 'Population growth (millions): Europe & Africa'
},
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
if (label3[index] === undefined) {
label3[index] = "no data ";
}
if (label2[index] === undefined) {
label2[index] = "no data ";
}
return "l3 " + label3[index] + "l2 " + label2[index] + ' $' + value;
}
}
}]
}
}
});
//use following code that might helpful
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
data: [86,114,106,106,107,111,133,221,783,2478],
label: "Africa",
borderColor: "#3e95cd",
fill: false
}, {
data: [282,350,411,502,635,809,947,1402,3700,5267],
label: "Asia",
borderColor: "#8e5ea2",
fill: false
}, {
data: [168,170,178,190,203,276,408,547,675,734],
label: "Europe",
borderColor: "#3cba9f",
fill: false
}, {
data: [40,20,10,16,24,38,74,167,508,784],
label: "Latin America",
borderColor: "#e8c3b9",
fill: false
}, {
data: [6,3,2,2,7,26,82,172,312,433],
label: "North America",
borderColor: "#c45850",
fill: false
}
]
},
options: {
title: {
display: true,
text: 'World population per region (in millions)'
}
}
});
I think this one as you mention have different label and differnt data and count
// here is link https://codepen.io/hiren65/pen/ydMZaJ
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [1, 2, 6, 11, 5],
type: "line",
borderColor: "red",
labels: [
'green',
'yellow',
'red',
'purple',
'blue',
]
}, {
data: [6, 7, 8],
type: "line",
borderColor: "#123ea2",
labels: [
'a',
'b',
'c'
],
}, {
data: [6, 3, 8,10,11,4],
type: "line",
borderColor: "#6cc",
labels: [
'a1',
'b1',
'c1',
'e1'
],
},]
},
options: {
responsive: true,
legend: {
display: true,
},
}
});
In Chartjs I have two plots, as shown here:
var config = {
type: 'line',
data: {
labels: [
"2017-07-03T01:05:00+0100",
....
],
datasets: [
{
label: "Consumption",
fill: 'origin',
pointRadius: 0,
borderColor: "#0000ff",
backgroundColor: "rgba(255,10,13,255)",
data: [
0.015625,
0.0199861111111,
...
],
}
,
{
fill: 'origin',
label: "PV",
pointRadius: 0,
borderColor: "#ebf909",
backgroundColor: "rgba(29,241,13,210)",
data: [
0.0,
.....
],
}
]
},
options: {
responsive: true,
title:{
display:true,
text:"Chart.js Line Chart - Stacked Area"
},
tooltips: {
mode: 'index',
},
hover: {
mode: 'index'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
stacked: false,
scaleLabel: {
display: true,
labelString: 'kWh'
}
}]
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, config);
Is there any way I can make the green plot show through the red one in places where the latter completely obscures the former?
You need to set fill property to false for the first dataset (the red one), to make it transparent.
datasets: [{
label: "Consumption",
fill: false,
pointRadius: 0,
borderColor: "#0000ff",
backgroundColor: "rgba(255,10,13,255)",
...
or, you can also reduce the opacity of background color, like so ...
backgroundColor: "rgba(255, 10, 13, 0.1)"
Here is the working codepen