I have the following code:
labels: [**<dates dynamically populated here>**],
markers: {
size: 3
},
As I am running out of space, how do I rotate date labels at the bottom of the chart 45 or 90 degrees?
Labels should rotate by default when there is no space, but if you want to have them always rotated (rotateAlways option) or change value you can do it in xaxis https://apexcharts.com/docs/options/xaxis/#rotate
xaxis: {
labels: {
rotate: -45
}
}
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;
}
}
Is their a way to rotate the legend on the left side of a bar chart vertically (in chartjs)? I can't seem to find it in the documentation.
Current:
Wanted:
Code:
chartData is an array containing the char data where chartData["yas"] is equal to the "Samples" legend title
let myChart = new Chart(chart, {
type: 'bar',
data: {
labels: chartData['labels'],
datasets: [{
label: chartData["yas"],
data: chartData['values'],
backgroundColor: '#6FB98F'
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'left'
}
},
scales: {
y: {
ticks: {
beginAtZero:true,
minRotation : 0
}
}
}
}
});
This is not possible with the current implementation of the legend in chart.js. You have 2 options, you can use a html legend and rotate that 90 degree with css. Or you can take the legend plugin as a basis and write the functionality yourself to rotate it and either use it or make a pr and get it into the main lib.
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
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.
My values are ranging from 0 to -6000... However, chart.js line chart is drawing the y-axis starting from 0 down up to -25000... The lines therefore almost overlap each other. How can I prevent the y-axis from drawing those excess values so my chart will look bigger.
Config is as follows:
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [
{
label: 'Sample',
data: [0, -2000, -1500, -1300, -4000, -4800, -4950]
}
]
}