I'm at a loss as to why my chart's tooltips aren't displaying... can anybody show me what I'm doing wrong?
The tooltips work fine if I set the chart type to "bar" but for some reason don't work with "line". I'm relatively new to chart.js and am probably making some basic newbie mistake?
Here's my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="250" height="150"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels:[],
datasets: [{
label: 'Applicants',
data: [],//start empty
backgroundColor: [
'rgba(10, 168, 196, 0.2)'
],
borderColor: [
'rgba(10, 168, 196, 1)'
],
}]
},
options: {
tooltips: {
enabled: true
},
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
// time: {
// unit: 'day'
// }
}],
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
onClick: handleClick
}
});
window.onmessage = function(event){
myChart.data.datasets[0].data = event.data.data;
myChart.data.labels = event.data.labels;
myChart.update();
};
function handleClick(e){
var activeBars = myChart.getElementAtEvent(e);
var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index];
var label = activeBars[0]._model.label;
window.parent.postMessage({
"type":"click",
"label":label,
"value":value
} , "*");
}
function ready(){
window.parent.postMessage({"type":"ready"}, "*");
}
</script>
</body>
</html>
For anyone having problems with this using Chartjs v3, you need to make sure you have registered the Tooltip plugin:
import { Chart, Tooltip } from 'chart.js'
Chart.register([Tooltip])
Related
Did anyone have the chance to work with the chartjs plugin - chartjs-plugin-crosshair? I'm having trouble after having zoomed in the datasets several times and when clicking the 'reset zoom' button I can only zoom out the last zoom in action, but I would like to return to the initial dataset before having initialized the zoom in action. Does anyone know how to tackle this problem?
Below is the code in jsfiddle:
https://jsfiddle.net/u0594jed/
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<link rel="stylesheet" href="">
<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair#1.2.0></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['a','b','c','d','e','f','g','h','i','a','b','c','d','a', 'c','d', 'a'],
datasets: [{
label: '# of Votes',
data: [100,200,400,321,345,1234,456,5675,345,456,678,79,456,345,234,34,345],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
plugins: {
tooltip: {
mode: 'interpolate',
intersect: false
},
crosshair: {
line: {
color: '#F66', // crosshair line color
width: 1 // crosshair line width
},
sync: {
enabled: true, // enable trace line syncing with other charts
group: 1, // chart group
suppressTooltips: false // suppress tooltips when showing a synced tracer
},
zoom: {
enabled: true, // enable zooming
zoomboxBackgroundColor: 'rgba(66,133,244,0.2)', // background color of zoom box
zoomboxBorderColor: '#48F', // border color of zoom box
zoomButtonText: 'Reset Zoom', // reset zoom button text
zoomButtonClass: 'reset-zoom', // reset zoom button class
},
callbacks: {
beforeZoom: () => function(start, end) { // called before zoom, return false to prevent zoom
return true;
},
afterZoom: () => function(start, end) {
// called after zoom
}
}
}
}
}
});
</script>
</body>
</html>
colleague:). Had the same problem... Found the answer into crosshair plugin src file: chartjs-plugin-crosshair.esm.js (line 477)
var filterDataset = (chart.config.options.scales.x.type !== 'category');
It means that you need to use another type of scale. I used type "time" - and voila, zoom fixed. Sample of code here
I am using charts.js to visualise some data, but unfortunately, I only see two data points, while the scale is like to highest value.
This is my code.
<canvas id="myChart" width="400" height="80"></canvas>
<script>
window.onload=function() {
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: '',
datasets: [{
label: 'Tests',
backgroundColor: 'rgb(252, 160, 12)',
borderColor: 'rgb(8, 19, 42)',
data: [
{x:'2016-12-23', y:200}, {x:'2016-12-24', y:300}, {x:'2016-12-25', y:400}, {x:'2016-12-26', y:100}
]
}]
},
// Configuration options go here
options: {
legend: {
display: false
},
}
});
};
</script>
I don't see, why this is limited. Suggestions are more than welcome.
Try like this, please.
<canvas id="myChart" width="400" height="80"></canvas>
<script>
window.onload=function() {
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: ['2016-12-23','2016-12-24','2016-12-25','2016-12-26']
datasets: [{
label: 'Tests',
backgroundColor: 'rgb(252, 160, 12)',
borderColor: 'rgb(8, 19, 42)',
data: [200, 300, 400 100]
}]
},
// Configuration options go here
options: {
legend: {
display: false
},
}
});
};
</script>
I am new to coding and am trying to make a barchart with eCharts. I have made a simple bar chart example but now I want to make a thick outline for the bars on the chart. This is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts-en.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'ECharts entry example'
},
tooltip: {},
legend: {
data:['Sales']
},
xAxis: {
data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
</body>
</html>
How do I add a thick black outline on the bars?
You can use the option barBorderColor and barBorderWidth to set the color and width of the border respectively for each bar.
Below is an example based on your existing code.
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'ECharts entry example'
},
tooltip: {},
legend: {
data: ['Sales']
},
xAxis: {
data: ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"]
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
//Added item style
itemStyle: {
normal: {
barBorderWidth: 5,
barBorderColor: "#000"
}
}
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts-en.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
I use chart.js and its dependency, jQuery to draw chart. In my case, I need 2 doughnut charts in one of my page, here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<title>Document</title>
<script>
$(function () {
var ctx = document.getElementById("layanan").getContext('2d');
var data = {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'#3c8dbc',
'#f56954',
'#f39c12',
],
}],
labels: [
'Request',
'Layanan',
'Problem'
]
};
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
}
}
});
var ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
var data_2 = {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'#3c8dbc',
'#f56954',
'#f39c12',
],
}],
labels: [
'Request',
'Layanan',
'Problem'
]
};
var myDoughnutChart_2 = new Chart(ctx_2, {
type: 'doughnut',
data: data_2,
options: {
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
}
}
});
});
</script>
</head>
<body>
<canvas id="layanan" width="240" height="240"></canvas>
<canvas id="layanan_subbagian" width="240" height="240"></canvas>
</body>
</html>
When I only have one chart, nothing's gone wrong, but when I try to add one more chart, my charts become so large and my page layout becomes so messy. Can you guys figure out what's wrong with my code? Thanks.
As per chartjs documentation:
Detecting when the canvas size changes can not be done directly from
the CANVAS element. Chart.js uses its parent container to update the
canvas render and display sizes. However, this method requires the
container to be relatively positioned and dedicated to the chart
canvas only. Responsiveness can then be achieved by setting relative
values for the container size
Source: https://www.chartjs.org/docs/latest/general/responsive.html
You should wrap your canvas into div and add width,height into it.
Here is the change I did
<div style="width:240px;height:240px">
<canvas id="layanan"></canvas>
</div>
<div style="width:240px;height:240px">
<canvas id="layanan_subbagian" ></canvas>
</div>
$(function () {
var ctx = document.getElementById("layanan").getContext('2d');
var data = {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'#3c8dbc',
'#f56954',
'#f39c12',
],
}],
labels: [
'Request',
'Layanan',
'Problem'
]
};
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
}
}
});
var ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
var data_2 = {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'#3c8dbc',
'#f56954',
'#f39c12',
],
}],
labels: [
'Request',
'Layanan',
'Problem'
]
};
var myDoughnutChart_2 = new Chart(ctx_2, {
type: 'doughnut',
data: data_2,
options: {
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
}
}
});
});
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<title>Document</title>
<div style="width:240px;height:240px">
<canvas id="layanan"></canvas>
</div>
<div style="width:240px;height:240px">
<canvas id="layanan_subbagian" ></canvas>
</div>
Try to add
options: {
responsive: false
}
I found two solutions:
You have to put the charts in a container such as a div. <canvas> is an element semantically dedicated for drawing graphics dynamically via scripting. <div> is a general-purpose container. The important point is: width and height properties are not the size in px but the ratio between them. <canvas id="layanan" width="240px" height="240px"></canvas> would result into a 1:1 ratio, but you need a parent container to work with. In the example below, I put a div around each canvas.
You can disable this feature by setting maintainAspectRatio to false. Removing the divs from my code and setting this into yours gives the same result :)
Cheers!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<title>Document</title>
<script>
$(function () {
var ctx = document.getElementById("layanan").getContext('2d');
var data = {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'#3c8dbc',
'#f56954',
'#f39c12',
],
}],
labels: [
'Request',
'Layanan',
'Problem'
]
};
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
responsive: false,
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
}
}
});
var ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
var data_2 = {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'#3c8dbc',
'#f56954',
'#f39c12',
],
}],
labels: [
'Request',
'Layanan',
'Problem'
]
};
var myDoughnutChart_2 = new Chart(ctx_2, {
type: 'doughnut',
data: data_2,
options: {
responsive: false,
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
}
}
});
});
</script>
</head>
<body>
<div>
<canvas id="layanan" width="240px" height="240px"></canvas>
</div>
<div>
<canvas id="layanan_subbagian" width="240px" height="240px"></canvas>
</div>
</body>
</html>
I'm very new to Chart.js and I'm working off the bar sample included when downloading Chart.js. I read through the documentation and the sample pages seem to do things a little differently. I tried following the documentation and online tutorials to no success, but working off the sample page is yielding better results.
However I can't seem to customize anything. I'm trying to start the scale value at 0 but it won't apply. This happens to all things I try to do (font color etc. etc. etc. etc.) The rest of the options here were included with the file and work. I'm not sure what I'm doing wrong.
<head>
<title>Bar Chart</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../dist/Chart.bundle.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
<script>
var barChartData = {
labels: ["Week 1", "Week 2"],
datasets: [{
label: 'Round 1',
backgroundColor: "rgba(220,220,220,0.5)",
data: [12,15]
}, {
label: 'Round 2',
backgroundColor: "rgba(151,187,205,0.5)",
data: [20,17]
}]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
scaleOverride:true,
scaleStartValue: 0,
options: {
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(0, 255, 0)',
borderSkipped: 'bottom'
}
},
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
}
}
});
};
</script>
</body>
You can use tick.beginAtZero
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
},
...
Fiddle - http://jsfiddle.net/7mse8p9e/