Develop Reference

Hiding labels on y axis in Chart.js 3.5.0 not working properly

This driving me nuts. I tried all of the stuff here and looked to documentation https://www.chartjs.org/docs/latest/getting-started/v3-migration.html
but still not able to remove y-axis labels from bar charts.
Which part I could be missing ?
Here is the part of the code that defines
y axis stuff
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chartOptions = {
scales: {
y: {
display: true
}
}
};
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: {{ countrynames|safe }},
datasets: [{
label: 'Infected Counts',
barThickness:'flex',
backgroundColor:'#03a9fc',
backgroundColor : 'rgb(255,99,132)' ,
borderColor : 'rgb(255,99,132)' ,
data: {{ barPlotVals|safe }}
}]
},
// Configuration options go here
options: { indexAxis: 'y', chartOptions}
});
</script>

pie chart inside donut chart using chart js

I use chart js to draw pretty charts for my project. Now I need to draw pie chart inside donut chart like this:
Data in donut chart doesn't depending on data in pie chart that inside. Color also doesn't matter. Does anyone have ideas?
I can only draw pie chart and donut chart separately))
function drawOperatorStatusChart(labels, data, title, colors) {
new Chart(document.getElementById("pie_chart_operator"), {
type: 'pie',
data: {
labels: labels,
datasets: [{
label: data,
backgroundColor: colors,
data: data
}]
},
options: {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return secondsToHHMMSS(data['datasets'][0]['data'][tooltipItem['index']]);
}
}
},
title: {
display: true,
text: title
}
}
});
}
function drawReportDetailedDoughnutChart(labels, data, title, colors) {
var ctx = document.getElementById('operator_detailed_doughnut_chart').getContext('2d');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
label: "",
backgroundColor: colors,
data: data
}]
},
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: title
},
animation: {
animateScale: true,
animateRotate: true
}
}
});
}

I would experiment with position absolute.
See a sample of my idea: http://jsfiddle.net/zteak2uq/
<canvas class="absolute" id="standChart"></canvas>

Pushing data from json to Chart.js labels and data

I am using the Chart.js lib to make charts.
I have a json array that I am getting from a database.
Here is the console log of it: Data
I need to get the address, speed, and speed limit for every element in the list and use it in a chart.
My current code is as follows:
function ShowChart() {
var popCanvas = document.getElementById("speedLimitsChart");
console.dir(speeddata);
var labels = speeddata.map(function (e) {
return e.Adress;
});
var speed = speeddata.map(function (e) {
return e.Speed;
});
var speedlimits = speeddata.map(function (e) {
return e.SpeedLimits;
});
console.dir(labels);
var barChart = new Chart(popCanvas, {
type: 'bar',
data: {
datasets: [{
label: 'Speed',
data: speed,
backgroundColor: '#1E90FF'
}, {
label: 'Speed Limits',
data: speedlimits,
backgroundColor: '#B22222',
type: 'line'
}],
},
labels: labels
});
}
But in the result I only have the first element in my chart, and there are no labels.
Here is the output screen: Chart
I checked speed, speedlimits and labels and all of them have 2 elements. Can you please advise where my problem might be?

I found where is my problem
I need to write labels inside of data
Like this
var barChart = new Chart(popCanvas, {
type: 'bar',
data: {
labels: labels ,
datasets: [{
label: 'Speed',
data: speed,
backgroundColor: '#1E90FF'
}, {
label: 'Speed Limits',
data: speedlimits,
backgroundColor: '#B22222',
type: 'line'
}],
},
});

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.

Remove tooltip from charts.js

I am using a plugin: charts.js
On hovering a radar chart (the bullets in it) a tooltip is shown. How can I remove it?

A layout for a chart with no tooltips would look like this:
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: { enabled: false },
...
}
})
I know some others have said exactly this, but this is a more complete example.

This is the code to Disable the tooltip option..
Chart.defaults.global.tooltips.enabled = false;

In ChartJS version 3.4.1 the tooltip configuration is located under options.plugins.tooltip - source
So a chart without tooltips would look like this:
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
plugins: {
tooltip: { enabled: false },
...
}
}
})