New user ChartJs v3.3, I have managed to create multiple radar charts and rotate it 90', the problem I can't seems to fix is the rotation for the ticks(I'm not sure if this is what is call)...
As you can see the radar chart has been rotated 90' but the numbers 1, 2, 3 and 4 are also rotated, in the documentation don't mention anything regarding that part, if this are the "ticks" I have try using the maxRotation but did nothing.
This is my current configuration:
const _options = {
responsive: true,
plugins: {
legend: {
display: false,
labels: {
color: 'rgba(255,255,255,0)'
}
},
},
scales: {
r: {
beginAtZero:true,
startAngle: 90,
max:4,
min:0,
ticks: {
stepSize:1,
// maxRotation: 40
}
}
}
};
The number are in the correct position and the chart itself is rotated correctly just the numbers are not rotated properly.
Like I said I'm a noob using this library(ChartJs).
Any help with be greatly appreciated.
This is not possible by default, looking at the source of chart.js they dont pass any rotation paramater to their text draw function where those labels are drawn: https://github.com/chartjs/Chart.js/blob/ed73dce18bd5a2d523409d1fcaadaf2bcdd1d89c/src/scales/scale.radialLinear.js#L552
So atm the only way to achieve this would be to render empty string using the scale callback and draw then numbers on the canvas yourself with an custom inline plugin
Related
I recently upgraded from Chart.js v2 to v3. I am drawing realtime line charts with a time-based x-axis that scrolls right as time passes.
In Chart.js v3, as my x-axis tick labels begins to approach the left edge of the chart, it resizes the graph to fit the full label. As shown in the attached image, this creates an empty gap on the left-side of my chart. In Chart.js v2, it would not resize the graph, and would instead allow the label to overflow the canvas.
My x-axis options are:
{
type: 'time',
axis: 'x',
min: minDate.getTime(),
max: maxDate.getTime()
time: {},
ticks: {
minRotation: 45,
maxRotation: 45,
source: 'labels'
}
};
Is there any option to restore the old behavior and allow the tick labels to overflow?
You could format the first tick to be empty string, using ticks.callback
{
type: 'time',
ticks: {
callback: (value, index) => index === 0 ? '' : value
}
}
example in codepen
I was eventually able to get the desired behavior using the afterFit callback.
{
type: 'time',
afterFit: (scaleInstance) => {
scaleInstance.paddingLeft = 0;
scaleInstance.paddingRight = 0;
}
}
I have a working code like in this link: https://codesandbox.io/s/keen-darkness-x31u7?fontsize=14&hidenavigation=1&theme=dark&file=/src/index.js
I want ask, is there a possibility we could change the position of yaxes label to the top? (see the expected picture below).
I had actually tried the below code but it displays in the middle of gridline instead of top.
scales: {
yAxes: [
{
ticks: {
mirror: true,
},
},
],
}
Current Output:
Expected Output:
The mirror is actually fine to move the yaxes labels to inside. Your only problem is to move the labels upward so that it won't intersect with the x-gridlines. And for that, you can use labelOffset property to achieve it, and then you can also put some padding to move the label a little a bit from the y-line.
labelOffset - Distance in pixels to offset the label from the centre point of the tick (in the x direction for the x axis, and the y direction for the y axis).
So in all, your code would look like this below:
yAxes: [
{
ticks: {
mirror: true,
padding: -10,
labelOffset: -10
}
}
]
see more props and their definition here
Dont think that this is possible, the closes you can get to this as far as I know is this.
Link: https://codesandbox.io/s/react-chartjs-2-forked-rgiyf?file=/src/index.js
code:
scales: {
yAxes: [
{
ticks: {
padding: -30
}
}
]
}
There is a workaround for this, if you put a null value as the first entry in your dataset and an empty string in the labels array you will get this:
With radar charts is it possible to have the order be reversed? For example have 10 being closest to the center and 1 being furthest away from the center for values that are 1 through 10?
To reverse the radar chart as you described:
type: 'radar',
data: {...},
options: {
scale: {
ticks: {
reverse: true,
beginAtZero: false,
min: 1
}
}
}
Refer to the doc Styling and Linear Radial Axis.
I'm trying to position a custom Chart.js tooltip on the middle of two bars. I made a research on the chart.js docs and different posts but didn't found any different approach than position it using the following snippet (I'm using jquery and doing a toggle class to hide/show the tooltip, please focus on the values I'm using to position the tooltip):
function setupTooltipPosition(config) {
const { tooltipElement, tooltipModel } = config;
const leftOffset = this._chart.canvas.offsetLeft;
const topOffset = this._chart.canvas.offsetTop;
tooltipElement.removeClass(tooltipSelectors.hide);
tooltipElement.css('left', `${tooltipModel.caretX - leftOffset}px`);
tooltipElement.css('top', `${tooltipModel.carteY - topOffset}px`);
}
Using this approach on this particular case I got this result:
[
I also tried using the x and y values of the tooltipModel , however , it doesn't add more sense of how to put the tooltip in the middle. If you tried to add a custom offset to put it on the middle , it works for just this case, but when you add more data it doesn't work. I can have at most 2 datasets, however, the user can add at most 10 data values that means 10 groups of bars.
The question is: There is a way to put the tooltip in the middle of the group of bars (or a single bar in case the user has just 1 dataset) using the values that Chart.js provide for tooltips? Or in other case, do you know any custom approach to have this tooltip centered?
Thanks!!
You don't specify if 'middle' means on the x- and/or y-axis. But since you wrote:
...on the middle of two bars...
I assume you mean on the x-axis. In this case you need to set the options.tooltips.mode property to index. Below is a working example.
let myChart = new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['x', 'y', 'z'],
datasets: [{
label: '1993',
data: [50, 30, 65],
backgroundColor: '#503291'
}, {
label: '1994',
data: [60, 15, 65],
backgroundColor: '#1bbecd'
}]
},
options: {
tooltips: {
mode: 'index'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
barPercentage: 1
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>
For future questions please provide a MCVE as that makes it much quicker and easier to help you.
Is there a way to align vertically the dot with the x-axis value? I'm using chart.js v2.5.0. I know that behaviour only happens when there's just one dataset pair [x,y].
If you provide a Fiddle or something like that we might be able to give something more concrete, but you can achieve this by setting the min property on the axes.
Something like that
let options = {
scales: {
yAxes: [{
ticks: {
min: <insert value here>,
}
}]
}
};