Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I am working with chart.js with the doughnut chart.
I want to now if I can show the values of the charts inside the chart.
Thanks
enter image description here
this is my code:
var myChart = new Chart(document.getElementById('grafic_assistencia'), {
type: 'doughnut',
data :{
labels:['OK','NO OK'],
datasets: [{
backgroundColor:['#5cb85c','#ff0000'],
data:[75,25],
datalabels: {
anchor: 'end'
}
}],
},
options: {
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderColor: 'white',
borderRadius: 25,
borderWidth: 2,
color: 'white',
display: function(context) {
var dataset = context.dataset;
var count = dataset.data.length;
var value = dataset.data[context.dataIndex];
return value > count * 1.5;
},
font: {
weight: 'bold'
},
padding: 6,
formatter: Math.round
}
},
},
});
Yes you can use the datalabels plugin for that
https://chartjs-plugin-datalabels.netlify.app/samples/charts/doughnut.html
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 days ago.
Improve this question
How to remove this border from chartjs canvas? Click here to see img
Where from this border come? I can't remove this bottom and left border.
Please help me to remove this border.
I am searched for this problem but didn't find anything
Here is my code .
var myChart5 = new Chart(ctx5, {
type: "doughnut",
data: {
labels: ["Jan", "Feb", "Mar"],
datasets: [
{
data: [30, 30, 40],
fill: true,
backgroundColor: ['#64C4F7', '#F8C140', '#FFA5A5'],
borderWidth: 0,
lineTension: 0.5,
},
],
},
options: {
cutout: 60,
plugins: {
legend: {
display: false
},
},
responsive: true,
animation: {
easing: "easeInOutQuad",
duration: 520,
},
scales: {
y: {
ticks: {
display: false,
},
grid: {
display: false,
drawBorder: false,
}
},
x: {
ticks: {
display: false,
},
grid: {
display: false,
drawBorder: false,
}
},
},
elements: {
point: {
radius: 0
}
}
},
});
I'm using the Datalabels plugin to provide labels to points on a Chart.js scatter graph.
My Chart.js / Datalabels configuration looks like this:
(Full example: https://codepen.io/LondonAppDev/pen/oNyReVr)
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: '# of Votes',
data: [
{x: 10, y: 10},
{x: 100, y: 100},
{x: 50, y: 50},
{x: 51, y: 51},
]
}]
},
plugins: [ChartDataLabels],
options: {
elements: {
point: {
radius: 5,
hoverRadius: 8
}
},
plugins: {
tooltip: {
enabled: false
},
datalabels: {
labels: {
value: {
align: 'top',
color: '#000',
borderColor: '#000',
borderWidth: 1,
offset: 20,
padding: 10,
backgroundColor: '#fff',
}
}
}
}
}
});
The default behaviour is that labels will overlap. I want to make the labels come to the forefront when they are hovered over. So if I hover over a label or point, it comes to the foreground.
I attempted to add this to options.plugins.datalabels.labels.value:
listeners: {
enter: function(context) {
context.dataIndex = 999;
context.datasetIndex = 999;
return true;
},
leave: function(context) {
context.dataIndex = 0;
context.datasetIndex = 0;
return true;
}
}
However it doesn't have the desired effect.
Anyone know how I can make the label come to the foreground on hover?
I would be glad if anyone can help me fix the problem i'm facing with Chart Js's Bubble Chart.
I am loading the chart dynamically based on change in drop down selection.
switch case is as below:
case "bar":
case "bubble":
case "line":
return {
type: value,
data: {
labels: labels,
datasets: [
{
data: data,
fill: false,
backgroundColor: colorCodes.chartBackGroundColor,
borderWidth: 1,
borderColor: colorCodes.chartGraphBorderColor,
hoverBorderWidth: 2
}
]
},
options: {
title: {
display: false
},
legend: {
display: false
},
layout: {
padding: 20
},
responsive: true,
maintainAspectRatio: false,
hover: {
animationDuration: 0
},
tooltips: {
enabled: false
},
animation: {
"duration": 1,
"onComplete": function () {
if (data.length > 0) {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize,
Chart.defaults.global.defaultFontStyle,
Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = data[index];
ctx.fillText(data, bar._model.x, bar._model.y);
});
});
}
}
},
scales: {
scaleOverride: true,
yAxes: [
{
scaleLabel: {
display: true,
labelString: chartTypeAndLabelConfig.yAxis.title,
fontSize: 20,
fontColor: "#1c969c"
},
display: true,
gridLines: {
display: true,
borderDash: [4, 2]
},
ticks: {
beginAtZero: true
}
}
],
xAxes: [
{
scaleLabel: {
display: true,
labelString: chartTypeAndLabelConfig.xAxis.title,
fontSize: 20,
fontColor: "#1c969c"
},
gridLines: {
display: false
}
}
]
}
}
};
the returned config is stored into a variable "chartConfig" and then the chart is created as below:
var chart = new Chart(ctx, chartConfig);
When dropdown is changed from bar to line or line to bar the chart is rendered, when i try to select bubble, i see same values plotted against x-axis and y-axis without any bubbles in the chart.
Example:
data = [1,2,3,4,5];
labels = [a,b,c,d,e];
when dropdown option for bubble is selected i get the chart rendered as:
When rendering chart dynamically, i'm also destroying the previously rendered chart and then rendering the chart based on the new config i get.
Is there anything i'm missing here?
I think the issue is that you need to convert the data into a format supported by bubble charts. For line and bar charts data can be integers or floats but for bubble charts they need to be Objects with a specified 'x', 'y' and 'r' (radius) value.
So for example to display a data in a bubble graph at point (1,4) with a radius of 10, you'll specify it as:
{x: 1, y: 4, r: 10}
One way of doing this could be to call a helper function before creating a bubble chart or storing a copy of the data as an Object to be used only for bubble charts. It really depends on how you've set up your project and if you are concerned about the number of computations carried out or not. Hope this helps!
Documentation for Chart.js Bubble Chart Data Structure
I'm trying to generate a bar graph but after generating when i hover on bar first graph the hover works and tooltip is also coming correctly but when i hover on second or third bar the bar color becomes black
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="barChart" style="margin-top:10px"></canvas>
var ctxBarChart = document.getElementById('barChart').getContext('2d');
var chart = new Chart(ctxBarChart, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: ['bar 1', 'bar 2', 'bar 3'],
datasets: [{
label: 'bar graph label',
backgroundColor: ['#ff7f27', 'DodgerBlue', 'Green'],
borderColor: ['#ff7f27', 'DodgerBlue', 'Green'],
data: [24.6154, 28.4, 28.4]
}]
},
// Configuration options go here
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return tooltipItem.yLabel.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + '%';
}
}
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
// max: 100,
min: 0,
// stepSize:20
}
}]
}
}
});
but the result i'm getting is like this please see following images for bar 1 and bar 2
This seems to be caused by case-sensitivity of colour names.
Change your colours to all lowercase like so:
backgroundColor: ['#ff7f27', 'dodgerblue', 'green'],
borderColor: ['#ff7f27', 'dodgerblue', 'green'],
The CSS3 specification explicitly states the names are case-insensitive so this looks like a bug in Chart.js
Using a standard bar chart I am able to successfully create a chart with two datasets plotted on two y-axis. Working Example here: https://jsfiddle.net/pe8kxjqc/12/ How can I create the same chart as a horizontalBar chart with the labels on the left and the two dataset axes on the top and bottom?
The horizontalBar chart doesn't appear to handle the second axis as expected. I've tried the following but it doesn't work like expected:
var data = {
labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
datasets: [
{
"label": "Total V",
"xAxisID": "v",
"backgroundColor": "rgba(53,81,103,1)",
"borderColor": "rgba(53,81,103,.4)",
"data": [100,90,80,70,60]
},
{
"label": "Total C",
"xAxisID": "c",
"backgroundColor": "rgba(255,153,0,1)",
"borderColor": "rgba(255,153,0,.4)",
"data": [10,9,8,7,6]
}]};
var options = {scales:{
xAxes:[
{position:"top",id:"v", gridLines:{color:"rgba(53,81,103,.4)"}},
{position:"bottom",id:"c", gridLines:{color:"rgba(255,153,0,.4)"}}
]}};
var ctx = document.getElementById("myChart");
new Chart(ctx, {type: "horizontalBar",data:data, options:options});
You can have dynamic configuration for bar as well as horizontalBar you can use this configurations
Fiddle demo
var data = {
labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
datasets: [{
"label": "Total V",
"yAxisID": "A",
"backgroundColor": "rgba(53,81,103,1)",
"borderColor": "rgba(53,81,103,.4)",
"data": [100, 90, 80, 70, 60]
}, {
"label": "Total C",
"yAxisID": "A",
"backgroundColor": "rgba(255,153,0,1)",
"borderColor": "rgba(255,153,0,.4)",
"data": [10, 9, 8, 7, 6]
}]
};
var options = {
scales: {
yAxes: [{
id: 'A',
position: 'left'
}]
}
};
var ctx = document.getElementById("myChart");
new Chart(ctx, {
type: "horizontalBar",
data: data,
options: options
});
coming to your question the actual problem is with var options={...} it is made to work only with bar charts. Hope you understand
Update
Replace following as option in the chart above for required axis scales
var options = {scales:{yAxes:[{id: 'A',position: 'left',gridLines:{color:"rgba(53,81,103,.4)"}},{position:"top",id:"c", gridLines:{color:"rgba(255,153,0,.4)"},ticks: { min: 0,max: 100,}},]}};
updated fiddle
Basically you will need a y-axis for the first dataset which going to hold the labels. And you will need two x-axis for showing the values in the top and in the bottom.
The second dataset will go to the x-axis which is shown at the top.
Working fiddle included:
{
scales: {
yAxes: [{
id: 'A',
position: 'left',
display: true,
gridLines: {
color: "rgba(53,81,103,.4)"
}
}, ],
xAxes: [{
barPercentage: 0.4,
display: true,
id: "1",
position: 'bottom',
ticks: {
fontColor: 'rgb(0, 0, 0)'
},
fontSize: 500,
}, {
stacked: false,
barPercentage: 1,
display: true,
type: 'linear',
id: '2',
position: 'top',
ticks: {
fontColor: 'rgb(0, 0, 0)'
},
fontSize: 500,
}],
}
};
fiddle for two axis horizontal bar chart