I am using chart js annotations plugin in Bar Chart. I am trying to rotate the label to align it vertically with the bar but it is not working. Can anyone please suggest how to use the rotation property?
annotation: {
annotations: [{
type: 'line',
// drawTime: 'afterDatasetsDraw',
mode: 'vertical',
scaleID: 'x-axis-0',
value: "0-25%",
borderWidth: 1,
label: {
xAdjust: 6,
enabled: true,
content: 'Highly Mobile',
rotation: 0
}
},
{
type: 'line',
// drawTime: 'afterDatasetsDraw',
mode: 'vertical',
scaleID: 'x-axis-0',
value: "26-50%",
borderWidth: 1,
label: {
xAdjust: 6,
enabled: true,
content: 'Highly Mobile',
rotation: 90
}
}]
Latest update: We can put git link of the same in package.json.
I found the answer. The chartjs annotation plugin cdn has not included the rotation property. We need to download the zip of master branch and extract it to our project folder. Then npm install ./{folder-name}.
I had the same issue withe the 0.5.7 version i suggest you to move to newer version or add this rotation file https://github.com/chartjs/chartjs-plugin-annotation/files/4988167/chartjs-plugin-annotation-rotation.zip, all this if you don't want to use nodejs.
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'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.
I'm making a linear graph and the pan and zoom functionality are not working.
I'm using:
"chart.js": "Chart-js#v2.5.0",
"chartjs-plugin-zoom": "Chart.Zoom.js#v0.7.0",
"hammerjs": "v2.0.8"
and added them in this orden in the html:
<script src="~/lib/hammerjs/hammer.min.js"></script>
<script src="~/lib/chart.js/dist/Chart.min.js"></script>
<script src="~/lib/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.min.js"></script>
I'm using chart.js 2.5.0 because i needed it to work on IE11 and read somewhere that it was better to use that version, but I'm not sure about that.
I copied a working code from snippets online, but it's still now working.
<canvas id="canvas" height="180"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 0, 5, 9, 4, 11]
}]
},
options: {
pan: {
enabled: true,
mode: 'x',
},
zoom: {
enabled: true,
mode: 'x',
}
}
});
</script>
The graph shows but I'm not getting the functionalities and in the console there are no errors.
Thanks in advance.
Try to use the latest version of ChartJS, at the moment 3.7.1.
If your downloaded scripts don't load, it could be a bug with IE11.
For me zooming works, but panning doesn't. (It is already an issue here
I have a dataset that has 1-2 entries per day and I don't want that many labels on the x-axis so I am going through them and only showing every 5th or 10nth one. My issue is I do want to show the label for each one in the tooltips. I have a second array or data with the original label set that I want to use for tooltips but can't seem to figure it out. I assume there should be a fairly simple solution for this.
Below is a simple example. I tried adding the cutom option on tooltips with the second dataset but no luck.
var labels = ["10-23-2017", "", "10-25-2017", ""];
var labels2 = ["10-23-2017", "10-24-2017", "10-25-2017", "10-26-2017"];
var chart = document.getElementById('chart').getContext('2d');
var myChart = new Chart(chart, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: labels,
datasets: [{
label: "Readings",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: data,
}]
},
// Configuration options go here
options: {
tooltip: [{
enabled: true,
custom: labels2
}]
}
});
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).