Chart.js tooltip not show - javascript

Chart work fine butt can't see tooltips…
I cant find where problem is and what I missing…
<div style="width: 1000px; height: 600">
<canvas id="myChart" ></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myNewChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["24.5.2018. 15:23:48", "24.5.2018. 16:00:00", "24.5.2018. 17:00:00", ],
datasets: [{
label: '# Temperature',
fill: false,
data: [29, 25, 24, ],
backgroundColor: [
],
borderColor: [
],
borderWidth: 1
}, {
label: '# Humidity',
data: [54, 62, 64, ],
borderColor: [
],
borderWidth: 1,
fill: false,
type: 'line'
}
]
},
options: {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'rgb(60, 180, 100)'
}
},
tooltips: {
cornerRadius: 4,
caretSize: 4,
xPadding: 16,
yPadding: 10,
backgroundColor: 'rgba(0, 150, 100, 0.9)',
titleFontStyle: 'normal',
titleMarginBottom: 15
}
}
});
</script>
Helper seed that I need add more text for posting this but dont konw how simple question make longer…. text text Helper seed that I need add more text for posting this but dont konw how simple question make longer….

Try this one
<div style="width: 1000px; height: 600">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myNewChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["24.5.2018. 15:23:48", "24.5.2018. 16:00:00", "24.5.2018. 17:00:00", ],
datasets: [{
label: '# Temperature',
fill: false,
data: [29, 25, 24, ],
borderWidth: 1
}, {
label: '# Humidity',
data: [54, 62, 64, ],
borderWidth: 1,
fill: false,
type: 'line'
}]
},
options: {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'rgb(60, 180, 100)'
}
},
tooltips: {
cornerRadius: 4,
caretSize: 4,
xPadding: 16,
yPadding: 10,
backgroundColor: 'rgba(0, 150, 100, 0.9)',
titleFontStyle: 'normal',
titleMarginBottom: 15
}
}
});
</script>
Just remove backgroundColor: [] and borderColor: [] from both datasets

Related

Horizontal line for bar chart

Information:
Chart.js v3.8.2
https://www.chartjs.org
new Chart(document.getElementById('esneklik').getContext('2d'), {
type: 'bar',
data: {
labels: ['test','test 2'],
datasets: [{
label: ' ',
data: [24,20],
backgroundColor: ['rgba(1, 56, 108, 0.6)'],
borderColor: ['rgba(1, 56, 108, 1'],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
type: 'linear',
min: 5,
max: 50
}
}
}
});
Example:
enter image description here
I want to draw a line horizontally and show the average value.
you can add a second dataset for the line.
specify the type as 'line' and set fill to false
datasets: [{
type: 'line', // <-- type as line
label: 'avg',
data: [22,22],
fill: false, // <-- fill as false
backgroundColor: 'red',
borderColor: 'red',
borderWidth: 1
}, {
label: 'bar',
data: [24,20],
backgroundColor: 'rgba(1, 56, 108, 0.6)',
borderColor: 'rgba(1, 56, 108, 1)',
borderWidth: 1
}]
the line dataset should be added first, else it will be behind the bars
see following working snippet...
$(document).ready(function() {
new Chart(document.getElementById('esneklik').getContext('2d'), {
type: 'bar',
data: {
labels: ['test','test 2'],
datasets: [{
type: 'line',
label: 'avg',
data: [22,22],
fill: false,
backgroundColor: 'red',
borderColor: 'red',
borderWidth: 1
}, {
label: 'bar',
data: [24,20],
backgroundColor: 'rgba(1, 56, 108, 0.6)',
borderColor: 'rgba(1, 56, 108, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
beginAtZero: true,
type: 'linear',
ticks: {
min: 5,
max: 50
}
}]
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="esneklik"></canvas>

Is it possible to draw a line chart in chart.js with multiple lines and **multiple lables**

Suppose x1={1,4,7,9} | y1={10,20,35,40} and x2={2,3,6,9} | y2={15,23,30,35}. Now I want to draw a line chart in chart.js for it.
P.S. Scatter chart is not a solution because my website is generating data dynamically so I have to provide data in array only and scatter requires the data in very sophisticated manner.
My simple question is by any way, can we have different x axis points in line chart for different lines??
code for your reference:
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var xValues1 = [50,60,70,80,90,100,110,120,130,140,150];
var yValues1 = [7,8,8,9,9,9,10,11,14,14,15];
var xValues2 = [54,64,74,84,94,104,114,124,134,144,154];
var yValues2 = [8,9,9,10,10,10,11,12,15,15,16];
new Chart("myChart", {
type: "line",
data: {
labels: xValues1,
datasets: [{
fill: false,
backgroundColor: "rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues1
},
{
fill: false,
backgroundColor: "rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues2
}
]
},
options: {
legend: {display: false},
scales: {
yAxes: [{ticks: {min: 6, max:16}}],
}
}
});
</script>
</body>
</html>
(for yvalues2, I want xvalues2)
You can add a second X axis for your other labels:
const xValues1 = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
const yValues1 = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];
const xValues2 = [54, 64, 74, 84, 94, 104, 114, 124, 134, 144, 154];
const yValues2 = [8, 9, 9, 10, 10, 10, 11, 12, 15, 15, 16];
const options = {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: yValues1,
borderColor: 'pink'
},
{
label: '# of Points',
data: yValues2,
borderColor: 'orange',
xAxisID: 'x2' // Match dataset to other axis
}
]
},
options: {
scales: {
xAxes: [{
type: 'category',
labels: xValues1,
id: 'x',
display: true // Set to false to hide the axis
},
{
type: 'category',
labels: xValues2,
id: 'x2',
display: true // Set to false to hide the axis
}
]
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

How to align multiple x axes in chart.js?

I have to create three line charts that share the same x-axis but are vertically stacked on top of each other with different y-axes.
Here is my current visualization.
Unfortunately, the x-axis tick marks do not line up because of the y-axis labels. How should I go about fixing this?
Just stack the axes:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Black"],
datasets: [{
label: 'Dataset 1',
data: [10, 30, 50, 20, 25, 44, -10],
borderColor: 'red',
backgroundColor: 'red'
},
{
label: 'Dataset 2',
data: [10000, 30000, 50000, 20000, 25000, 44000, -10000],
borderColor: 'blue',
backgroundColor: 'blue',
yAxisID: 'y2',
}
]
},
options: {
scales: {
y: {
type: 'linear',
position: 'left',
stack: 'demo',
grid: {
borderColor: 'red'
},
title: {
display: true,
text: 'hello'
}
},
y2: {
offset: true,
position: 'left',
stack: 'demo',
grid: {
borderColor: 'blue'
},
title: {
display: true,
text: 'hello2'
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.0/dist/chart.min.js"></script>
</body>

Chart.js annotation horizontal line on double y-axis graph

I have been looking for the mistakes I may have made in my codes but still, the horizontal line does not appear on my graph somehow. Is it because of my double y-axis graph?
Below is my code for the graph:
var canvas = document.getElementById('chart').getContext("2d");
new Chart(canvas, {
type: 'line',
data: {
labels: ['Morning 6am-12pm', 'Afternoon 12pm-4pm', 'Evening 4pm-7pm', 'Night 7pm-12am', 'Dawn 12am-6am'],
datasets: [{
label: 'Temperature',
yAxisID: 'A',
data: [30, 32, 33, 31, 30]
}, {
label: 'Humidity',
yAxisID: 'B',
data: [80, 77, 74, 79, 83],
lineTension: 0.3,
fill: false,
borderColor: 'lightblue',
backgroundColor: 'transparent',
pointBorderColor: 'lightblue',
pointBackgroundColor: 'lightgreen',
pointRadius: 5,
pointHoverRadius: 15,
pointHitRadius: 30,
pointBorderWidth: 2
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 100,
min: 0
}
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 32,
borderColor: 'rgb(75, 0, 0)',
borderWidth: 4,
label: {
enabled: false,
content: 'Test label'
}
}]
}
}
});
And this is the result of my graph:
You've changed the ID of the y-axes to A and B:
yAxes: [{
id: 'A',
...
}, {
id: 'B',
...
In the annotation plugin configuration you tell it to draw on y-axis-0 (which is the default ID):
annotation: {
annotations: [{
scaleID: 'y-axis-0',
...
Change the configuration to whichever y-axis you want to draw the annotation to:
scaleID: 'A'
Edit: Working example with Chart.js 2.7.2
var canvas = document.getElementById('chart').getContext("2d");
new Chart(canvas, {
type: 'line',
data: {
labels: ['Morning 6am-12pm', 'Afternoon 12pm-4pm', 'Evening 4pm-7pm', 'Night 7pm-12am', 'Dawn 12am-6am'],
datasets: [{
label: 'Temperature',
yAxisID: 'A',
data: [30, 32, 33, 31, 30]
}, {
label: 'Humidity',
yAxisID: 'B',
data: [80, 77, 74, 79, 83],
lineTension: 0.3,
fill: false,
borderColor: 'lightblue',
backgroundColor: 'transparent',
pointBorderColor: 'lightblue',
pointBackgroundColor: 'lightgreen',
pointRadius: 5,
pointHoverRadius: 15,
pointHitRadius: 30,
pointBorderWidth: 2
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 100,
min: 0
}
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'A',
value: 32,
borderColor: 'rgb(75, 0, 0)',
borderWidth: 4,
label: {
enabled: false,
content: 'Test label'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="chart"></canvas>

Modify the legend of a double doughnut with chart js

I'm trying to create a legend for a doughnut chart created with chart js. The problem is I have two doughnut charts stacked and when creating the legend it defaults to the labels of the first.
I want the legend to show up with the blue label as CPU and a green label as MEM.
Currently the labels when hovering on either doughnut is free and used which I'd like to keep.
here is the script used to create the chart
var responseChartLoad = new Chart(responseChartCanvas, {
type: 'doughnut',
data: {
labels: ["Used", "Free"],
datasets: [{
data: [0, 100],
backgroundColor: [
'#42a5f5',
'#eceff1',
],
borderColor: [
'#FFF',
'#FFF'
],
borderWidth: 2
}, {
data: [0, 100],
backgroundColor: [
'#4db6ac',
'#eceff1',
],
borderColor: [
'#FFF',
'#FFF'
],
borderWidth: 2
}]
},
options: {
responsive: true,
cutoutPercentage: 50,
animation: {
animateRotate: true
},
legend: {
display: true,
position: 'bottom'
},
elements: {
center: {
text: 'CPU/MEM',
fontStyle: 'Helvetica', //Default Arial
sidePadding: 50 //Default 20 (as a percentage)
}
}
}
});
To accomplish that you would have to generate custom legend items, which could be done using the generateLabels method of legend­'s labels, as such :
legend: {
labels: {
generateLabels: function() {
return [{
text: 'CPU',
fillStyle: '#42a5f5',
strokeStyle: '#fff'
}, {
text: 'MEM',
fillStyle: '#4db6ac',
strokeStyle: '#fff'
}];
}
}
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var responseChartLoad = new Chart('responseChartCanvas', {
type: 'doughnut',
data: {
labels: ["Used", "Free"],
datasets: [{
data: [10, 100],
backgroundColor: [
'#42a5f5',
'#eceff1',
],
borderColor: [
'#FFF',
'#FFF'
],
borderWidth: 2
}, {
data: [5, 100],
backgroundColor: [
'#4db6ac',
'#eceff1',
],
borderColor: [
'#FFF',
'#FFF'
],
borderWidth: 2
}]
},
options: {
responsive: true,
cutoutPercentage: 50,
animation: {
animateRotate: true
},
legend: {
display: true,
position: 'bottom',
labels: {
generateLabels: function() {
return [{
text: 'CPU',
fillStyle: '#42a5f5',
strokeStyle: '#fff'
}, {
text: 'MEM',
fillStyle: '#4db6ac',
strokeStyle: '#fff'
}];
}
}
},
elements: {
center: {
text: 'CPU/MEM',
fontStyle: 'Helvetica', //Default Arial
sidePadding: 50 //Default 20 (as a percentage)
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="responseChartCanvas"></canvas>

Categories