So I'm trying to configure chart.js so that there is always a slight bar shown even for the lowest value. I can see there is a "minBarLength" property which the docs says to "Set this to ensure that bars have a minimum length in pixels." but I can't seem to get this working?
Here's a sandbox using the latest version of chart.js and with the use of this property as shown here:
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
minBarLength: 4,
backgroundColor: "blue"
}
]
}
However, the lowest value is still not being displayed on the graph:
I should also note that I am aware of the "beginsAtZero" property but I don't wish to use this as this can make it difficult displaying charts that have large values.
Any help would be greatly appreciated!
Simply tell your yAxes to beginAtZero by extending the options as follows:
options: {
title: {
display: true,
text: "Custom Chart Title"
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
you probably do not have this issue anymore, but if anyone reads this.
I am using "chart.js": "3.8.0". When you set the min of the y-Axis for example to 1 you have to set the attribute "base" of the dataset to 1 as well so that minBarLength can work.
Related
Here is an example (that doesn't work in qualtrics, works fine if I just make an HTML file and open in browser)
In qualtrics:
Make a (text/graphic question)
In HTML put <canvas id="myChart" style="width:100%;max-width:700px"></canvas>
In the question javascript put
jQuery.getScript("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js", function(){
var xyValues = [
{x:50, y:7},
{x:60, y:8},
{x:70, y:8},
{x:80, y:9},
{x:90, y:9},
{x:100, y:9},
{x:110, y:10},
{x:120, y:11},
{x:130, y:14},
{x:140, y:14},
{x:150, y:15}
];
new Chart("myChart", {
type: "scatter",
data: {
datasets: [{
pointRadius: 4,
pointBackgroundColor: "rgb(0,0,255)",
data: xyValues
}]
},
options: {
legend: {display: false},
scales: {
xAxes: [{ticks: {min: 40, max:160}}],
yAxes: [{ticks: {min: 6, max:16}}],
}
}
});
});
Then, if you try to preview the survey , the chart will not load and you will get a console error of TypeError: undefined is not an object (evaluating 'iScale.axis')
If you change the source to https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js (version 3.3.2) then the chart will load.
Any way to deal with this? Or is the only option to stick with version 3.3.2 or older?
Aside: Instead of using jQuery.getScript, you can just put the script source in the look and feel header section. Same behavior though.
So I've been trying to recreate the chart in the following image:
I'm using the cutoutPercentage property but it affects both doughnuts, in my case, I only want to change the thickness of the outer ring.
This is what I have now:
You can define the weight option on individual datasets to obtain the desired result.
weight: The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values.
Please take a look at below runnable code snippet and see how it works.
var pieChart = new Chart("myChart", {
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow"],
datasets: [{
data: [300, 50, 100],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
weight: 0.2
}, {
data: [200, 100, 25],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
}]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
im using ChartJs for displaying graph, and i try to costumize tooltip height using height on options based on ChartJs documentation.
https://www.chartjs.org/docs/latest/configuration/tooltip.html
but it doesnt work.
this is my option on my Chart.
options {
tooltips: {
mode: 'point',
intersect: true,
xPadding: 10,
yPadding: 10,
bodySpacing: 4,
backgroundColor: '#fff',
borderColor: '#eff6ff',
borderWidth: 2,
height: 10,
titleFontColor: '#1fb7c7',
bodyFontColor: '#333333'
}
}
i need to make the tooltip like this way.
There is no configuration naming 'height' for tooltips, so it will not work.
tooltips: {
height:10
}
Instead, you can use bodyFontSize, the height of the tooltip will be altered based on the value you assign to it.
tooltips: {
bodyFontSize:15
}
And use position and mode options to change the postion of the tooltips.
I am implementing chartjs, when the number of col too large. It will display like this:
My question is: Is there any way to keep the label always across?
For example:
Thanks!
You can specify maxRotation (and minRotation) in the tick configuration. Be aware that Chart.js may omit labels to ensure the text does not overlap.
options: {
scales: {
xAxes: [{
ticks: {
maxRotation: 0
}
}]
}
}
I'm working with Chart.js and creating line charts. I can't seem to get rid of the line above every chart coordinate. See the picture below. Which setting do I need to change to get rid of them? Thanks.
Click me
Here is what the chart variable looks like
var chart = new Chart(chartx, {
type: 'line',
data: {
labels: labels,
datasets: [{
data: data,
fill: false,
borderColor: 'rgb(0,0,0)',
borderWidth: 1,
lineTension: 0,
pointStyle: 'dash'
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
animation: false,
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
legend: {
display: false,
}
},
});
This is because you put pointStyle: 'dash' in your dataset attributes.
See Chart.js doc about LineChart data structure (pointStyle is at the last row of the table) :
The style of point. Options are 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using drawImage.
You have to choose between the different options.
Note that there is no none option.
If you want to remove the point style, you can :
Set the pointRadius attribute of your dataset to 0 (like in this fiddle).
Import an image as stated in the second part of the blockquote, which is empty (like this one).