As shown above, the letter spacing in my Chart.js is very large. I have no clue as to why it is that way - here is my config:
var myLineChart = new Chart(ctx, {
type: 'line',
data: lineChartData,
options: {
responsive: true,
scales: {
yAxes: [
{
gridLines: {
color: '#354657',
},
ticks: {
fontFamily: 'Open Sans',
},
},
],
xAxes: [
{
gridLines: {
color: '#354657',
},
ticks: {
fontFamily: 'Open Sans',
},
},
],
},
},
});
The letter spacing is this large no matter what font I use. Is there a method to reduce it?
Not sure if you've resolved this or not yet, but thought I'd give you a heads up. I had a similar question and linked it to this, the answer for me was removing the devicePixelRatio setting that I had set, but given you have the problem in the browser version (I imagine), have you tried setting devicePixelRatio = 2? It might be the fix for this.
Related
I played around with the stacked bar chart at
https://www.chartjs.org/docs/latest/samples/bar/stacked.html
Its currently looking like that:
config:
const config = {
type: 'bar',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
},
responsive: true,
indexAxis: 'y',
scales: {
x: {
stacked: true,
title: {
display: true,
text: 'x-axis description',
},
},
y: {
ticks: {
mirror: true,
z: 1,
backdropColor: 'rgba(255, 0, 255, 0.75)'
},
stacked: true,
title: {
display: true,
text: 'y-axis description',
},
}
}
}
};
setup:
const labels = ['Short Label', 'vryshrtlbl', 'a litle bit more longer label', 'pretty veeeeeeeeeeeeeeeeeeeeeerylong label', 'ultra extreeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeemly long label']
const data = {
labels: labels,
datasets: [
{
label: 'Losers',
data: [-1,-2,-3,-44,-5],
backgroundColor: 'rgba(255, 0, 0, 0.5)',
},
{
label: 'Winners',
data: [6,12,23,55,5],
backgroundColor: 'rgba(255, 0, 0, 1)',
}
]
};
The thing is, that I may have such long labels. Since I dont want to waste space for them which makes the actual chart smaller I decided to bring the tick labels into the chart area.
But I would make them a bit better visible:
may move then to the right/center a bit
I already tried padding but this also shrinks the chart area, thats a no-go
bring a backgroundcolor like a grey box behind the tick labels such that there is no switch from white background to red bar behind the text
I was sure to achive that with backdropColor bit this option does not do anything.
from documentation I am sure I placed the setting correctly but I dont see any background behind the tick labels
Any Ideas why this does not work?
btw: I tried to provide a jsfiddle but when I place my code there it is ignoring the 'indexAxis' property and the 'stacked: true' as well. The first one I can workaround by using "type: 'horizontalBar'". But not the stacked one. Is this any kind of old writing this 'horizontalBar'? On chartjs page itself they are using 'bar' only.
If this may also could be answered then I may can prepare a fiddle in the future.
But one can reproduce my problem by going to
https://www.chartjs.org/docs/latest/samples/bar/stacked.html
and replace the contents with mine above.
Thanks.
Well for your first part of your question I have no solution. (it might be possible if you write a plugin or so, but no out-of-the-box solution, that I know of)
For part two "the grey box", check the demo below.
In short you will have to set the parameter showLabelBackdrop to true.
Here a demo, how I would do this:
let labels = ['Short Label', 'vryshrtlbl', 'a litle bit more longer label', 'pretty veeeeeeeeeeeeeeeeeeeeeerylong label', 'ultra extreeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeemly long label']
const data = {
labels: labels,
datasets: [
{
label: 'Losers',
data: [-1,-2,-3,-44,-5],
backgroundColor: 'rgba(255, 0, 0, 0.5)',
},
{
label: 'Winners',
data: [6,12,23,55,5],
backgroundColor: 'rgba(255, 0, 0, 1)',
}
]
};
const config = {
type: 'bar',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
},
responsive: true,
indexAxis: 'y',
scales: {
x: {
stacked: true,
title: {
display: true,
text: 'x-axis description',
},
},
y: {
ticks: {
mirror: true,
backdropColor: '#cdcdcd',
backdropPadding: 0, // <- Adjust the box padding
showLabelBackdrop: true,
z: 1,
},
stacked: true,
title: {
display: true,
text: 'y-axis description',
},
}
}
}
};
new Chart(
document.getElementById('chart'),
config
);
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart" style="height:300px; width:500px;">
<canvas id="chart" ></canvas>
</div>
the automatic scaling of the y-axis does not seem to work properly. I have the following code:
<script>
$(function () {
var lineChartCanvas = $('#lineChart').get(0).getContext('2d')
var lineChartData = {
datasets: [
{
label: 'Digital Goods',
backgroundColor: 'rgba(60,141,188,0.9)',
borderColor: 'rgba(60,141,188,0.8)',
pointRadius: false,
pointColor: '#3b8bba',
pointStrokeColor: 'rgba(60,141,188,1)',
pointHighlightFill: '#ffffff',
pointHighlightStroke: 'rgba(60,141,188,1)',
data: {{data}}
},
]
}
var lineChartOptions = {
maintainAspectRatio: false,
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false,
}
}],
yAxes: [{
gridLines: {
display: false,
}
}]
}
}
var lineChart = new Chart(lineChartCanvas, {
type: 'line',
data: lineChartData,
options: lineChartOptions
})
});
enter image description here
The graphs yaxes goes till 5, however, there is no data bigger than 1. I would like it to be more precise (y-axes not higher than 1 or something). However, as this code is part of a bigger application, I cannot set a fixed max as the code differs per scenario.
I tried to add an example, however, the data is not exactly like that (orginially 8760 values) and in this example another problem comes up. My lib is jquery.min.js (https://jsfiddle.net/742ovrLm/)
I have a requirement where on hover i need to show one horizontal line like in below fiddle.
but tool-tip is getting disappeared once on hover horizontal line is drawn.
Can anyone help how i can get tool-tip along with horizontal line.
Please note in below fiddle we have issue on hover it takes time but in my actual project hover is working fine , i just have issue that after hover tool-tip does not work after some time.
https://jsfiddle.net/h8ow63be/
var option = {
legend: false,
title: {
display: true,
},
onHover: function(evt) {
var item = myLineChart.getElementAtEvent(evt);
if (item.length) {
updateChart(data.datasets[0].data[item[0]._index].y)
}
},
animation: {
duration: 0
},
annotation: {
annotations: lines
},
scales: {
xAxes: [{
id: 'x-axis',
type: 'linear',
position: 'bottom',
ticks: {
max: 12,
min: 1,
stepSize: 1
}
}],
yAxes: [{
id: 'y-axis',
type: 'linear',
}],
}
};
I am trying to draw a horizontal bar chart using chart.js 2.3.0 -
var MeSeContext = document.getElementById("MeSeStatusCanvas").getContext("2d");
var MeSeData = {
labels: [
"ME",
"SE"
],
datasets: [
{
label: "Test",
data: [100, 75],
backgroundColor: ["#669911", "#119966" ],
hoverBackgroundColor: ["#66A2EB", "#FCCE56"]
}]
};
var MeSeChart = new Chart(MeSeContext, {
type: 'horizontalBar',
data: MeSeData,
options: {
scales: {
yAxes: [{
stacked: true
}]
}
}
});
But it only shows one bar. What did I miss here?
You can see only one chart because the lowest value of your data (75 here) is the scale's left limit.
As shown in the following screenshot of your code's result, if you hover on the scale, you can still see the associated data, which means it is here.
You have two ways to fix this :
Set the min property of the xScale ticks to the value you want (enough to see it of course) :
var MeSeChart = new Chart(MeSeContext, {
type: 'horizontalBar',
data: MeSeData,
options: {
scales: {
xAxes: [{
ticks: {
min: 60 // Edit the value according to what you need
}
}],
yAxes: [{
stacked: true
}]
}
}
});
You can see the result with a min set to 60 on this jsFiddle :
Set the beginAtZero property to true, which is the same as setting min to 0 :
xAxes: [{
ticks: {
beginAtZero: true
}
}],
You can see the result with the beginAtZero property set to true on this jsFiddle.
Using v2.0beta of Chart.js
I'm having trouble displaying the xAxes and yAxes scale labels, as well as setting the yAxes min/max.
I need the yAxes ticks to range from -10 to 120 in increments of 10....this was super easy to do in v1 but I had to switch to v2.0 in order to invert the yAxes...help would be much appreciated :)
Tried setting it up in a jsfiddle but couldn't get it to work, sorry.
Here's my Line object:
var chart = new Chart(context, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [
{
position: "top",
scaleLabel: {
display: true,
labelString: "Frequency (Hz)",
fontFamily: "Montserrat",
fontColor: "black",
},
ticks: {
fontFamily: "Montserrat",
}
}
],
yAxes: [
{
position: "left",
scaleLabel: {
display: true,
labelString: "dB",
fontFamily: "Montserrat",
fontColor: "black",
},
ticks: {
fontFamily: "Montserrat",
reverse : true,
min: -10,
max: 120,
},
}
],
},
}
});
A bit late answer but Chart.js v2.0beta doesn't seem to support those tick options well.
I updated your fiddle. I updated Chart.js v2.0beta to Chart.js v2.5, which is the latest Chart.js for now.
Your tick options should look like
ticks: {
min: -10,
max: 110,
stepSize: 10,
reverse: true,
},
I know you were asking for set boundaries, but with my chart I do not know what the scale is so I look at the data and get the Hi/Low and adjust the chart to match the data.
var hi = data.datasets[3].data[0];
var lo = data.datasets[1].data[data.datasets[1].data.length - 1];
ticks: {
max: hi,
min: lo,
stepSize: 10
}
}
Hope this helps someone.