I built a line chart & a bar chart in Chartjs with exactly the same configuration, but for some reason the x-scales of both charts are different as you can see in the picture below.
The configuration for the both charts is the same, the only difference is the chart type:
function getOptions() {
return {
animation: false,
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: false,
legend: {
display: false
},
title: {
display: false
}
},
elements: {
line: {
fill: true
},
point: {
radius: 0
}
},
scales: {
x: {
type: "time",
time: {
displayFormats: {
second: 'HH:mm:ss',
minute: 'HH:mm',
hour: 'HH'
},
unit: 'minute',
stepSize: 1,
min: '00:00:00',
max: '23:59:59',
},
grid: {
display: true,
drawBorder: true,
drawOnChartArea: true,
drawTicks: true,
color: function(context) {
return '#fff';
},
}
},
y: {
beginAtZero: true,
grid: {
display: true,
drawBorder: false,
color: function(context) {
return '#fff';
},
},
}
}
};
}
I noticed that the x axes do align perfectly, if I set the "stepSize" to 'seconds'. This probably has to do with the fact that the data inserted into the chart is second-data.
This is because the bar chart sets the offset property on the x axis scale to true.
https://www.chartjs.org/docs/3.8.0/axes/cartesian/category.html#common-options-to-all-cartesian-axes
So to align them you either have to set it to false for the bar chart or to true for the line chart
Related
Is there any way to give padding from the Y-axis so that there is a gap from the gridlines? I achieved this with a transparent border and ticks border. Also, How Can I customize the length of the tick indicator.
Targeted Graph Design => https://i.ibb.co/gFJVyBQ/image.png
Current Graph Design => https://i.ibb.co/LNtgTtT/image.png
my graph config code:
const config = {
type: "line",
data: data,
options: {
animations: {
tension: {
duration: 1000,
easing: "linear",
to: 0.3,
from: 0,
},
},
interaction: {
intersect: false,
},
elements: {
point: {
radius: 1,
hoverRadius: 4,
hitRadius: 10,
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
external: externalTooltipHandler,
},
},
scales: {
yAxes: {
grid: {
color: "#ACB8BE",
borderColor: "rgba(0,0,0,0)", //transparent border
},
position: "right",
//How to add padding to this AXES?
min: 1.0,
max: 2.0,
ticks: {
stepSize: 0.1,
padding: 30, //padding form the axis
//How to customize the length of the ticks indicator?
},
},
xAxes: {
grid: {
offset: true,
display: false,
},
},
},
},
};
I have tried creating new custom axes but didn't find any luck there. Can anyone suggest to me how to add this customization?
When plotting a time scatter plot by category (x-axis = time, y-axis = category) the points at the top and the bottom of the graph get cut in half:
Is there are way to solve this problem?
I use ChartJS with Angular 6 and the ng2-charts wrapper. This is my Options Object:
public scatterChartOptions: ChartOptions = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: true
},
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
min: this.minDate.toISOString(),
max: this.maxDate.toISOString()
},
display: true,
ticks:{
padding: 50
}
}],
yAxes: [{
display: true,
type: 'category',
gridLines: {
display:true,
},
}],
}
};
I have a chart using chart.js, it's a simple line, and if I hover over the line everything is correct, a circle shows on the point and the tool tip appears.
Now I also wanted that when the user hovers on the X-axis, it would select the circle and show the tooltip for the value at that X-axis point.
So I added this:
tooltips: {
intersect: false,
mode: "index"
}
and it works correctly, now if I hover on the X-axis I'll get the tooltip on my line, but one thing that doesn't work is, I dont get the "circle" on my line, only the tooltip!
I get the circle only if I hover directly on the line, here 2 images so you can see the difference:
in the above image I'm hovering directly on the line, and it shows the Circle and the tooltip
in this image instead I'm hovering on the X-axis and as you can see, it will display only the tooltip on my line, but not the circle!
How can I display the circle even when not hovering directly?
thank you
EDIT: added more code:
ngOnInit(): void {
this.ctx = this.myChartRef.nativeElement.getContext("2d");
this.canvas = new Chart(this.ctx, {
type: "scatter",
data: {
labels: [],
datasets: [
{
label: "Grade",
data: [],
borderColor: "#3cba9f",
fill: false,
pointHitRadius: 10,
showLine: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: true,
elements: {
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 8
}
},
tooltips: {
displayColors: false,
intersect: false,
enabled: true,
mode: "index",
callbacks: {
afterBody: function([tooltipItem], data): any {
const multistringText = ["Points: " + tooltipItem.xLabel];
multistringText.push("Grade: " + tooltipItem.yLabel);
return multistringText;
},
label: function(tooltipItem, data): any {
return;
}
}
},
layout: {
padding: {
top: 12
}
},
legend: {
display: false
},
scales: {
gridLines: {
drawBorder: false
},
xAxes: [
{
ticks: {
beginAtZero: false,
maxTicksLimit: 8,
stepSize: 5,
callback: function(value, index, values): any {
if (Math.floor(value) === value) {
return value;
}
if (value % 5 === 0) {
return value;
}
}
},
scaleLabel: {
display: false
}
}
],
yAxes: [
{
ticks: {
beginAtZero: false,
min: 1,
max: 6
},
scaleLabel: {
display: false
}
}
]
}
}
});
}
I have created a Radar chart with 360 labels; for each degree one. But I don't want to show them all on the scale. How can skip ticks?
I would like to skip some labels on the x-axis because there are too many points. I have tried all the following settings. Can any body please help me?
I have tried to make the labels empty in the array, but then the tooltip those not work
I tried both make the font-size smaller as well as skipping ticks:
{
type: 'radar',
pointDot: false,
scaleOverride: true,
scaleSteps: 4,
scaleStepWidth: 5,
scaleStartValue: 0,
data: {
labels: [],
datasets: []
},
options: {
elements: {
line: {
tension:0,
borderWidth:3
}
},
scales: {
ticks: {
max: 100,
fontSize: 6,
autoSkip: true,
stepSize:50
},
gridLines: {
display: false
},
pointLabels: {
fontSize: 6
}
},
legend: {
display: false,
labels: {
fontSize: 6
}
},
labels: {
fontSize: 6
}
},
pointLabelFontSize: '6px'
}
I have ChartJS version 2.5.0
The result is as follows:
Output of graph
I work on SilverStripe 4 and usign Chart js (barchart) and the gridLine is don't show. here my code
var ctx = document.getElementById("plradar").getContext("2d");
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data,
options: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Degre'
},
scale: {
ticks: {
beginAtZero: true,
min: 0,
max: 5,
stepSize: 1
},
pointLabels: {
fontSize: 12
}
},
elements: {
point: {
radius: 3
}
}
}
});
as the result
Can someone advise how to change my code?