Develop Reference

Is there a way to display legend's data over the chart in chart.js?

I've created a pie chart using the chart.js and react-chartjs-2 library but I was wondering if there is a way to display the data over the chart component and not as a tooltip while hovering about each area of the pie chart
What I wanted to do is display the data related to each area over itself, like on top of it.

The options can be added while creating new chart
var pieChart = new Chart(canvas, {
type: "pie",
data: data,
options: {
legend: {
display: true,
position : 'top'
},
tooltips: {
enabled: false
}
}
});

Removing legend from chart.js Radar chart

I am using the Radar chart from Chart.js and I want to hide the legend(label) I did this:
new Chart("myChart", {
type: "radar",
data: data,
options: {
legend:{
display: false,
},
}
});
But is not working for some reasons also checked those:
Removing legend on charts with chart.js v2
Removing legend on charts with chart.js v2
I'm doing the same but not working

As described in the migration guide (https://www.chartjs.org/docs/master/getting-started/v3-migration.html#specific-changes) the legend has been moved to the plugins namespace so you will need to put it like so:
new Chart("myChart", {
type: "radar",
data: data,
options: {
plugins: {
legend: {
display: false,
},
}
}
});

Chart.js - Bar values showing on the middle of bar

I have this default bar chart and it is showing bar values inside bar. I don´t want that to be shown
This is the code of chart:
myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: datasets
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
maintainAspectRatio: false
}
});
There is any option to disable this behaviour?
Best Regards

Problem solved:
There was included in scripts the datalabels plugin and was writting the value on the bar.

Why the draggable plugin does not work for a radar chart in ChartJS?

Currently I am building a frontend application, that uses data like AirQuality and information about POIs. For displaying the rating of the single points I am using a radar chart with ChartJS (using it the First Time ever!).
I can already change the chart with input data, that is pushed to the chart after a button click. Another functionality I wanted to implement is the possibility to drag the endpoints of the radar chart to change the values.
I found the draggable plugin and I have tried to implement it, but it does not work like I thought it would.
This is the first time I am working with chartJS and I have found myself confused with the documentation about the plugin.
I am using plain JavaScript. No frameworks at all.
Here is the code for my chart:
var data = {
labels: ["Air", "POI", "Noise"],
datasets: [{
backgroundColor: "#50237f",
borderColor: "#50237f",
data: [33.3333333333, 33.3333333333, 33.3333333333],
label: 'Rating'
}]
};
var options = {
scale: {
ticks: {
min: 0,
max: 100,
stepSize: 25,
showLabelBackdrop: false
}
},
maintainAspectRatio: true,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
};
var ctx = document.getElementById("ratingChart");
var myChart = new Chart(ctx, {
type: 'radar',
data: data,
options: options,
config: {
plugins: {
// maybe set the plugin here? but how?
}
}
});

How to combine two Highcharts chart types?

Right now I have a simple column chart with following code using Highcharts:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
//some code
},
xAxis: {
categories: []
},
yAxis: {
//some code
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
legend: {
//some code
},
series: []
};
$.getJSON("data/column.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
I now want to add a line chart to the same container, using exactly the same options (despite of the chart type). The date is also served via JSON.
How can I achieve this?
What I did so far:
I created a second variable "options2" with values chart and series.
Then I called
$.getJSON("data/line.php", function(json) {
options.xAxis.categories = json[0]['data'];
options2.series[1] = json[1];
chart = new Highcharts.Chart(options2);
});
But that only shows the first column chart.

Probably you should try use $.merge to prevent object edition.
Try this
$.getJSON("data/column.php", function(json) {
// Merge objects
var newOptions = $.extend({}, options);
// Edit new object instead of old
newOptions.xAxis.categories = json[0]['data'];
newOptions.series[0] = json[1];
chart = new Highcharts.Chart( newOptions );
});

Solved it by passing the series option (chart type) directly via JSON.
I added the "type:line" to the data array, which then overrides previously set options within the script tag.