Hiding xAxis labels when using Chart.js - javascript

I am using chart.js to create a linegraph from data in a locally hosted mysql DB.
I am able to pull this data and display it as intended, however despite following documentation and advice given else where I am unable to hide the xAxis Labels. The code I am using is below - any help would be much appriacated.
var chardata = {
labels: time,
datasets: [
{
label: "System health",
fill: false,
backgroundColor: "rgba(123, 192, 67, 0.75)",
borderColor: "rgba(123, 192, 67, 1)",
pointHoverBackgroundColor: "rgba(123, 192, 67, 1)",
pointHoverBorderColor: "rgba(123, 192, 67, 1)",
data: health_score
}
]
};
var ctx = $("#mycanvas");
var options = {
type: 'line',
data: chardata,
options: {
scales: {
xAxes: [{
ticks: {
display: false
}
}]
}
}
};
var LineGraph = new Chart(ctx, options);
Cheers

..
var options = {
type: 'line',
data: chardata,
options: {
scales: {
xAxes: [{
display: false,
ticks: {
display: false
}
}]
}
}
};
..

Related

Multiple datasets on the same plot with different sizes with Chart.js

How to draw 2 datasets on the same Chart.js plot, but with different sizes?
one line is for daily points
the second line has points every 6 hours, i.e. 4 x more points
This doesn't work:
const ctx = document.getElementById('myChart').getContext('2d');
const data = {
labels: ["mon", "tue", "wed", "thu"],
datasets: [{
label: 'daily',
data: [65, 59, 80, 81],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}, {
label: 'every 6 hours',
data: [60, 61, 62, 61, 58, 57, 66, 44, 81, 87, 99, 13, 81, 80, 79, 78],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};
const myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
In this codepen I randomly found it nearly works but I don't think it's the standard way,because when you hover one red bar, it shows the tooltip as expected, but also shows the tooltip for a distant unrelated point, which is not good.
Note: I have already read ChartJS - Line Chart with different size datasets but the result is not good (see the answer's screenshot's x-axis which is unreadable).
To avoid to have the hovering on the unrelated points, you could try to set the hover options, like the following:
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js - Combo Chart With Multiple Scales (X Axis)'
},
hover: { // <-- to add
mode: 'nearest'
},
tooltips: {
mode: 'nearest',
intersect: true
},
...
}
var chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(231,233,237)'
};
// returns a random integer between 0 and 10 inclusive
var getRandomValue = function() {
min = Math.ceil(0);
max = Math.floor(50);
return Math.floor(Math.random() * (max - min + 1)) + min;
};
// generates a value for each hour in a week
var generateData = function(n) {
var data = [];
for (var i = 0; i < n; i++) {
data.push({
x: i,
y: getRandomValue()
});
}
return data;
};
var hourlyData = generateData(168);
var dailyData = generateData(7);
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
datasets: [{
type: 'line',
label: 'Daily',
borderColor: chartColors.red,
data: dailyData,
borderWidth: 2,
fill: false
}, {
type: 'line',
label: 'Hourly',
borderColor: chartColors.green,
backgroundColor: chartColors.green,
borderWidth: 1,
fill: false,
pointRadius: 0,
xAxisID: 'x-axis-2',
data: hourlyData
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js - Combo Chart With Multiple Scales (X Axis)'
},
hover: {
mode: 'nearest'
},
tooltips: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{}, {
id: 'x-axis-2',
type: 'linear',
position: 'bottom',
display: false,
}],
yAxes: [{
ticks: {
min: 0,
max: 50
}
}]
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>

chartjs - bar graphs size not increasing

I'm having an issue in setting bars width using chart.js.
This is my code:
<script>
var endpoint = '/api/';
$.ajax({
method: "GET",
url: endpoint,
success: function (data) {
drawBarGraph(data, 'myChartBar');
console.log("drawing");
},
error: function (error_data) {
console.log(error_data);
}
})
function drawBarGraph(data, id) {
var labels = data.labels;
var chartLabel = data.chartLabel;
var chartdata = data.chartdata;
var ctx = document.getElementById(id).getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
barThickness: 0.9,
label: chartLabel,
data: chartdata,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 0.2)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
</script>
I cannot increase the bar thickness.
I'm using Argon Dashboard with Django.
Is this an issue with theme's css?
What am I missing here?
Change this value
xAxes: [{
// Change this
barPercentage: 0.2
}]

How to make rectangle in chart.js

I am trying to put rectangle to make a upper-lower range/level in chart.js, like in image
Although I am able to make it by drawing two line in this example
var ctx = document.querySelector("#myChart").getContext('2d');
Chart.pluginService.register({
afterDraw: function(chart) {
if (typeof chart.config.options.lineAt != 'undefined') {
var lineAt = chart.config.options.lineAt;
var ctxPlugin = chart.chart.ctx;
var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id];
ctxPlugin.strokeStyle = "green";
ctxPlugin.beginPath();
lineAt = 102;
ctxPlugin.moveTo(xAxe.left, lineAt);
ctxPlugin.lineTo(xAxe.right, lineAt);
ctxPlugin.moveTo(xAxe.left, lineAt-33);
ctxPlugin.lineTo(xAxe.right, lineAt-33);
ctxPlugin.stroke();
}
}
});
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Nov","Dec"],
datasets: [{
label: 'Findings',
data: [0,45],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
lineAt: 15,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 20,
stepValue: 20,
max: 60,
min: 0
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
Please share your suggestion here : http://jsfiddle.net/nikleshraut/ad2fsefe/
There is already a Chart.js plugin exists called chartjs-plugin-annotation, by which you can achieve that much easily.
Using that plugin, you'll need to create a box annotation (rectangle), as such :
options: { //your chart options
annotation: {
annotations: [{
type: 'box',
drawTime: 'beforeDatasetsDraw',
yScaleID: 'y-axis-0',
yMin: 40,
yMax: 50,
backgroundColor: 'rgba(0, 255, 0, 0.1)'
}]
}
}
note: this is the minimum options required to draw that rectangle,
and you can find more options here.
Here is a working fiddle.

ChartJS BoxWidth not working

First, my JSFidle: https://jsfiddle.net/ethernetz/u8yc4tvb/
At the top of the chart, there is a pink box. I want that box to go away. Others have done this by adding
legend: {
labels: {
boxWidth: 0,
}
},
to their code to make the box go away. As you can see, this didn't affect my box at all. What am I doing wrong?
you should move the legend configuration inside the option object Fiddle
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Completion'],
datasets: [{
data: [60, 20],
backgroundColor: [
'rgba(255, 99, 132, 0.8)',
'rgba(54, 162, 235, 0)',
],
borderWidth: 0
}]
},
options: {
responsive: false,
cutoutPercentage: 90,
events: [],
legend: {
labels: {
boxWidth: 0
}
}
}
});

ChartJS: horizontalBar Label Error

I'm with a error on my HorizontalBar Chart. Basically when i mouse hover on some bar, it should show me the Label name and Value of this bar. But in my chart it shows Label and Label, without value.
Here is a pic: https://i.stack.imgur.com/NGNPM.jpg
it should show me : "Top 10 Clientes and 2400 below"
This is totally static code, here is:
var gerarGraficoDeBarrasHorizontal = function (name, labels, components){
var myChart = new Chart(name, {
type: 'horizontalBar',
data: {
labels: labels,
datasets: components
},
options: optionsSemLegenda
});
}
// OBJECT TO CLARIFY THE CHART CREATION
var barrasHorizontal = [{
data: [2500, 5000],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)'],
borderColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)'],
borderWidth: 1
}];
// CREATE CHART
gerarGraficoDeBarrasHorizontal('topDezClientesxFaturamentoTotal', ["Top 10
Clientes", "Faturamento Total"], barrasHorizontal);
Thanks a lot!!
#Edit #1
var optionsSemLegenda = new Object();
optionsSemLegenda = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
beginAtZero: true
}
}]
},
legend: {
display: false
},
tooltips: {
callbacks: {
label: function (tooltipItem) {
return tooltipItem.yLabel;
}
}
}
}

Categories