Working with a line chart on ChartJS. When you hover over a point on the chart and the tooltip appears, is there a way to edit the layering (essentially zIndex value) so the tooltip would appear behind the graph point?
Basically, I want this tooltip to go behind the circle instead of like
this.
There is no plugin hook that notifies between a line and point draw, so best you can do is use the beforeDatasetsDraw hook to draw it in. By default the tooltip only uses the afterDraw hook to draw the tooltip so you will need to manually add the beforeDatasetsDraw hook to the Tooltip and set it to what used to be the afterDraw hook and make that an empty function like so:
Chart.Tooltip.beforeDatasetsDraw = Chart.Tooltip.afterDraw;
Chart.Tooltip.afterDraw = () => {}
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
}
}
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/3.6.2/chart.js"></script>
</body>
Related
I would like to use chart.js to draw a bar in a horizontal bar chart that has a border all the way around.
As can be seen on the image I'm successful in applying a border but I can't figure out how to get a border on the left side; which would make it a full square.
Any help would be appreciated.
You can set the borderSkipped option to false, depending on if you do it in the options or on the dataset level it will apply to all bars or only the bars of that specific dataset.
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 5,
borderColor: 'pink',
borderSkipped: false //Apply setting only to this bar dataset
}]
},
options: {
elements: {
bar: {
borderSkipped: false // Apply setting to all bar datasets
}
}
}
}
var 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/3.5.0/chart.js"></script>
</body>
I am looking to build the same as shown in the image, I checked chart.js documentation(https://www.chartjs.org/docs/3.0.2/) but didn't find anything like this. Is it possible to create a chart like this using chart.js?
Yes you can use the datalabels plugin to achieve what you want:
Example:
Chart.register(ChartDataLabels);
var options = {
type: 'bar',
data: {
labels: ["Category 1", "Category 2", "Category 3"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
animals: ['cat', 'dog', 'bear'],
borderWidth: 1,
backgroundColor: ['orange', 'blue', 'gray']
},
{
label: '# of Points',
data: [7, 11, 5],
animals: ['monkey', 'bird', 'fish'],
borderWidth: 1,
backgroundColor: ['yellow', 'cyan', 'purple']
}
]
},
options: {
plugins: {
title: {
display: true,
text: 'title'
},
datalabels: {
anchor: 'end', // remove this line to get label in middle of the bar
align: 'end',
formatter: (val, x) => (x.dataset.animals[x.dataIndex]),
labels: {
value: {
color: 'purple'
}
}
}
}
}
}
var 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/3.3.2/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0-rc"></script>
</body>
you can use Plotly.js for grouped chart please check below code
Reference URL : https://plotly.com/javascript/bar-charts/
var trace1 = {
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23],
name: 'SF Zoo',
type: 'bar'
};
var trace2 = {
x: ['giraffes', 'orangutans', 'monkeys'],
y: [12, 18, 29],
name: 'LA Zoo',
type: 'bar'
};
var data = [trace1, trace2];
var layout = {barmode: 'group'};
Plotly.newPlot('myDiv', data, layout);
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-1.58.4.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
I tried so many time to ask this question but no one was able to help me so I decided to deleted the previous question and reask with taking into considerations the answers that I received.
I have this chart created with chartjs, as you can see you can hover over points to see their coordinated or data, I would like to have an option to show them without having to hover. The reason why I want to do this is because I am going to add export to pdf, and it exports whatever it can see on the HTML , and exporting a chart without its values would be unreadable to the end user.
Note (I don't know if this matters but I am using django and I did not do any npm installation of datalabels)
Another Note : I was told that I have to register the plugin before using it, with
Chart.register(ChartDataLabels); but adding it the chart script just causes the chart to disappear.
.cann {
border: 3px solid darkgrey;
padding: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
width: 650px;
height: 250px;
margin-left: 3em;
}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- semantic UI -->
<link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
<!--Chart js-->
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.0.0-alpha"> </script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0-rc"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function (){
Chart.register(ChartDataLabels);
var ctx = document.getElementById('myChart');
window.myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
data: [12, 19, 3, 5, 2, 3],
label: 'Advisor Closed MTD',
backgroundColor: 'rgb(192,111,94)',
barThickness: 25,
datalabels: {
color: '#FFCE56'
}
}],
},
options: {
responsive: false,
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
labels: {
value: {
color: 'blue'
}
}
}
}
}
}
);
});
</script>
<canvas id="myChart" class="cann"></canvas>
How about instead of reposting and deleting you post each time so people dont know whats wrong you actually keep your post so people can actually help you because with what you provide its working fine, chart shows, with register the plugin shows so unless you point out where its going bad and people can see it you wont get any better answers
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.2.1">
</script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0-rc"></script>
<canvas id="turn_over_line" class="cann"></canvas>
<script>
// Turn over line chart
$(document).ready(function() {
Chart.register(ChartDataLabels);
var ctx = document.getElementById('turn_over_line');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [0, 1, 2, 3, 2, 3, 0.5, 8, 4, 2],
datasets: [{
backgroundColor: '#ccddee',
borderColor: '#5566aa',
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}]
},
options: {
legend: false,
tooltip: false,
plugins: {
datalabels: {
align: function(context) {
var index = context.dataIndex;
var value = context.dataset.data[index];
var invert = Math.abs(value) <= 1;
return value < 1 ? 'end' : 'start'
},
anchor: 'end',
backgroundColor: null,
borderColor: null,
borderRadius: 4,
borderWidth: 1,
color: '#223388',
font: {
size: 11,
weight: 600
},
offset: 4,
padding: 0,
formatter: function(value) {
return Math.round(value * 10) / 10
}
}
}
}
});
})
</script>
Actually my code was perfectly fine, I appreciate the effort of the guy who kept posting the same answer that did not help, I finally figured out that the issue is in my chartjs version , so if you are facing the same issue with chartjs 3.0.0-alpha , 3.2.1 seemed to fix it for me.
I am trying to create a mixed chart with horizontal bar chart and a dot to represent the answer from the current user. I have the horizontal bar chart created (please see attached screenshot) and I would like to show a green dot to represent what the current user answered. I am able to show the green dot using a mixed vertical bar chart with a line chart (keeping all points on the line null, except the one that needs to show the green dot), but I am not able to make this work using a horizontal char.
https://www.dropbox.com/s/i4xrwabq49ufzth/Untitled.png?dl=0
Next time when you ask a question please post the code you already have so people can help you more easily, made a quick example for you you can see underneath here.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May"],
datasets: [{
label: 'values',
backgroundColor: "red",
borderColor: "red",
data: [120, 23, 24, 45, 51]
}, {
type: 'line',
label: 'point',
backgroundColor: "green",
borderColor: "green",
data: [{
y: 'Feb',
x: 27
}]
}]
},
options: {
responsive: true,
indexAxis: 'y',
elements: {
point: {
radius: 10,
hoverRadius: 10
}
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.11/chart.js" integrity="sha512-1J1wxKm2JepFETRYyEEDHQAjc5ZgRvdYKWdfiP27m1pfDmLQ47joNkTPHVvmfkg7BLktY+Jd0TU1VAuIO81uQg==" crossorigin="anonymous"></script>
</body>
</html>
I am working ChartJS component using angular2. I would like to know whether there is any way to render as this image or not.
Basically, The Bar Chart rendered on the grid. When I click on the column bar, for example, June the horizontal line should be displayed with the up arrow at the exact month under the column bar. Do you have any suggestions? Thanks in advance.
You can capture the onclick event of the canvas and check which bar has been clicked with the getElementAtEvent method of chartjs. getElementAtEvent gives you all the relevant information you need (chart-width, x-coordinate of the bar, label etc.) to draw a custom line below the chart.
canvas.onclick = function (evt) {
var activePoints = myBarChart.getElementAtEvent(evt);
if (activePoints[0]) {
//draw your custom line
}
};
The snippet below has two canvas. One for chart.js to draw the actual chart and the second below to draw a line with the text of the clicked label.
var canvas = document.getElementById('myChart');
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 20, 81, 56, 55, 40],
}]
};
var option = {
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
};
var myBarChart = Chart.Bar(canvas, {
data: data,
options: option
});
canvas.onclick = function (evt) {
var activePoints = myBarChart.getElementAtEvent(evt);
if (activePoints[0]) {
var chart = activePoints[0]._chart;
var canvasX = document.getElementById('xAxis2');
// set the width of the second canvas to the chart width
canvasX.width = chart.width;
var canvas2D = canvasX.getContext('2d');
// draw the line
canvas2D.moveTo(0, 20);
canvas2D.lineTo(activePoints[0]._view.x - 10, 20);
canvas2D.lineTo(activePoints[0]._view.x, 0);
canvas2D.lineTo(activePoints[0]._view.x + 10, 20);
canvas2D.lineTo(canvasX.width, 20);
canvas2D.stroke();
// add the label text
canvas2D.font = '12px serif';
canvas2D.fillText('for ' + activePoints[0]._view.label, canvasX.width - 100, 15);
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>
<canvas id="xAxis2" height="20"></canvas>