How to change colour of specific xAxis label in charts js - javascript

I have been tasked to build a radar chart using charts.js. I need to change the colour of one of the labels for the xAxis to show "This is the data point we are looking at"
I have looked at the "color" option in the documentation on their website, but can't get this to work. https://www.chartjs.org/docs/latest/general/options.html?h=color
Anyone have any ideas?
Thanks in advance :-)

So you do this with "pointLabels", took a bit of finding TBH ;-).
EG:
options: {
legend: {
display: false,
},
scale: {
pointLabels: {
display: true,
fontColor: [
'rgba(95, 31, 34, 0.1)',
'rgba(95, 31, 34, 0.1)',
'rgba(95, 31, 34, 0.1)',
'rgba(241, 78, 86, 1)',
'rgba(95, 31, 34, 0.1)',
'rgba(95, 31, 34, 0.1)'
],
},
ticks: {
display: false,
},
}
}

Related

is it possible to duplicate the y axis labels to the right side of a google chart?

is there anyone having some experience with Google Charts, who was facing a similar problem before? I basically need to display the same y axis labels on the both sides of the graph, as shown on the image:
image of the graph
Here is my dataset:
['Date', 'Drilling', 'Stacked', 'Cold stacked', 'Construction', 'Repair']
['2020-09-16', 406, 171, 135, 67, 3]
['2020-09-17', 407, 170, 135, 67, 3]
['2020-09-18', 408, 169, 135, 67, 3]
['2020-09-19', 408, 169, 135, 67, 3]
['2020-09-20', 409, 168, 135, 67, 3]
['2020-09-21', 408, 169, 135, 67, 3]
['2020-09-22', 406, 171, 135, 67, 3]
['2020-09-23', 407, 170, 135, 67, 3]
...and so on...
And graph settings:
{
isStacked: true,
colors: ['#ff4852', '#005BFF', '#FFAB2E', '#af5ddf', '#00A580'],
vAxis: {
format: '######',
},
chartArea: {
top: '30',
height: '75%',
width: '80%',
},
series: {
0: {
textPosition: 'none',
},
},
vAxes: {
1: {
textPosition: 'none',
},
},
hAxes: {
0: {
gridlines: { color: 'transparent' },
},
},
}
Need to test it out but let's try as below. Otherwise you have to duplicate the series data and set it to 'targetAxisIndex: 1'.
series: {
0: {
targetAxisIndex: 0,
targetAxisIndex: 1,
},
},

Reduce spacing between bars in horizontal bar chart (chart.js)

I have the following horizontal bar chart
<template>
<div>
<canvas id="myChart" width="100" height="100"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js';
export default {
data() {
return {
ctx: null,
chart: null,
}
},
mounted() {
this.ctx = document.getElementById('myChart');
this.chart = new Chart(this.ctx, {
type: 'horizontalBar',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
categoryPercentage: 0.4,
label: 'Stars',
data: [15, 28, 34, 48, 100],
backgroundColor: [
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
],
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
categoryPercentage: 0.4
}]
}
}
});
}
}
</script>
I want to reduce the spacing between one bar and the other (not eliminate it, just reduce it), but I don't know how to do this, if I use the categoryPercentage prop it does about the same as barPercentage, just reduces the size of the bar itself but not the distance between each bar.
This is how is looking right now
If possible I would also have the chart in a blank canvas too
The bar width is influenced through the options barPercentage and categoryPercentage, which both need to be defined on the dataset.
To find out about the relationship between barPercentage and categoryPercentage, see here.
Please take a look at your amended runnable code below:
new Chart('myChart', {
type: 'horizontalBar',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
barPercentage: 0.9,
categoryPercentage: 1,
label: 'Stars',
data: [15, 28, 34, 48, 100],
backgroundColor: [
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)'
],
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
In case you simply want to see the existing bars closer to each other, you need to change the height of the chart. This can be done directly on the canvas through the height attribute. Alternatively you may also enclose the canvas in a div that has its dimensions defined by some CSS.

Polar Area in Chart JS Rotates When Adding Labels

I've been trying to figure this out for a while now. After adding labels to a polar plot, the lines and labels rotate slightly, while the actual data being plotted stays in the correct place, making the chart look a bit off. Tried removing every property from both the options and data objects, and it still rotates when I add the labels. Does anyone have a clue as to why this is happening?
Comparison Image
This is my data and options objects:
type: 'polarArea',
data: {
labels: ["NORTH", "EAST", "SOUTH", "WEST"],
datasets: [{
data: [24, 22, 20, 18, 20, 23, 19, 10, 8, 6, 23, 17],
backgroundColor: 'rgb(255, 99, 132, 0.6)',
hoverBackgroundColor: 'rgb(230, 99, 132)',
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scale: {
angleLines: {
display: true
},
pointLabels: {
display: true
},
ticks: {
beginAtZero: true,
callback: function (value) {
return value + "%";
}
},
},
}
I fixed this by updating chart.js from version 2.8.0 to 3.0.0-alpha. Still not sure why it did not work on the stable release.

Can't increase font size in google bar chart

I have the following mock up of a bar chart. Pretty simple except I can't seem to get the font size on the X axis to increase. I am guessing I am doing something wrong with the hAxis or just using the wrong option.
<script src="Chart.Bundle.min.js" type="text/javascript"></script>
...
<canvas id="myChart" height="220" ></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Break','Lunch','Meeting','Aux Out','Aux In'],
datasets: [{
data: [20, 20, 20, 20, 20],
backgroundColor: [
'rgba(66, 244, 98, 0.9)',
'rgba(101, 3, 96, 0.9)',
'rgba(198, 192, 194, 0.9)',
'rgba(43, 136, 234, 0.9)',
'rgba(232, 11, 55, 0.9)'
],
borderColor: [
'rgba(57,214,86,1)',
'rgba(81, 2, 77, 1)',
'rgba(145, 140, 141, 1)',
'rgba(37, 118, 203, 1)',
'rgba(173, 8, 41, 1)'
],
borderWidth: 2
}]
},
options: {
responsive: true,
legend : {
display: false,
},
hAxis: {
textStyle: {
fontSize: 32
}
}
}
});
</script>
</div>
first, you're using chart.js not google charts
for chart.js, the x-axis label font size options are as follows...
scales: {
xAxes: [{
ticks: {
fontSize: 40
}
}]
}
see following working snippet...
$(document).ready(function() {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Break','Lunch','Meeting','Aux Out','Aux In'],
datasets: [{
data: [20, 20, 20, 20, 20],
backgroundColor: [
'rgba(66, 244, 98, 0.9)',
'rgba(101, 3, 96, 0.9)',
'rgba(198, 192, 194, 0.9)',
'rgba(43, 136, 234, 0.9)',
'rgba(232, 11, 55, 0.9)'
],
borderColor: [
'rgba(57,214,86,1)',
'rgba(81, 2, 77, 1)',
'rgba(145, 140, 141, 1)',
'rgba(37, 118, 203, 1)',
'rgba(173, 8, 41, 1)'
],
borderWidth: 2
}]
},
options: {
responsive: true,
legend : {
display: false,
},
scales: {
xAxes: [{
ticks: {
fontSize: 18
}
}]
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myChart"></canvas>

Highcharts fill bar background

Hi guys I have a highcharts graph that is a stacked bar and I am trying to give my chart the effect that it is being filled, almost like a thermometer. Currently when the chart draws the red and gray bars push everything to the right. Is there a way that I can set the gray bar so that it shows right away on page load, and then the red bar fills into the gray bar? Thanks
http://jsfiddle.net/jimbob25/L974T/
series: [{
name: 'null',
data: [5, 69, 86, 75, 48],
borderRadius: 5,
color: "gray"
}, {
name: 'Values',
data: [95, 31, 14, 25, 62],
color: "red",
borderRadius: 5
}]
Update, I would like it to look like the first bar in the following link
http://jsfiddle.net/L974T/3/
You can see that the first bar is grey, i can make the rest gray and it would be fine, but the bars would not scale based off of resolution
Here is what you can do:
add one more series, with different stack (as background) - animation for that series should be disabled (duplicated of gray one)
change color for right-hand series to transparent
And here is working code: http://jsfiddle.net/L974T/4/
series: [{
name: 'null',
data: [5, 69, 86, 75, 48],
borderWidth: 0,
color: "rgba(0,0,0,0)"
}, {
name: 'null',
data: [5, 69, 86, 75, 48],
borderWidth: 0,
stack: 1,
animation: false,
color: "gray"
}, {
name: 'Values',
data: [95, 31, 14, 25, 62],
color: "red",
borderWidth: 0,
borderRadius: 5
}]

Categories