I have the following graph and I want to remove the gap between each of the bars.
I've tried everything I can think of to get rid of the gap. barPercentage & categoryPercentage are both set to 1.0. I've tried playing with the border width, but that doesn't seem to have any effect. I want each bar to be right next to each with no spacing.
Any ideas on how to accomplish this?
Side Question: The right border of the graph isn't drawing for some reason even though I have a padding set. Any ideas how to fix this too?
options: {
layout: {
padding: 10
},
tooltips: {
mode: 'index'
},
scales: {
xAxes: [{
stacked: true,
ticks: {
display: false
},
barPercentage: 1.0,
categoryPercentage: 1.0,
gridLines: {
}
}],
yAxes: [{
// stacked: true,
ticks: {
beginAtZero: true
}
}]
}
}
Related
I have strange problem trying to display labels for X-axis and Y-axis.
I check the same code for my charts in CodeSandbox, it works fine. But in my project it doesn't work...I have empty areas instead text labels.
I have several chunks of options for different types of charts. In options for showing labels I have:
scales: {
yAxes: [
{
scaleLabel: {
display: true,
labelString: initialLabels.y_label,
},
ticks: {
beginAtZero: true,
},
},
],
xAxes: [
{
scaleLabel: {
display: true,
labelString: initialLabels.x_label,
},
ticks: {
beginAtZero: true,
},
},
],
}
I logged initialLabels.x_label and initialLabels.y_label, its OK! What type of problem it can be?
I have a requirement where on hover i need to show one horizontal line like in below fiddle.
but tool-tip is getting disappeared once on hover horizontal line is drawn.
Can anyone help how i can get tool-tip along with horizontal line.
Please note in below fiddle we have issue on hover it takes time but in my actual project hover is working fine , i just have issue that after hover tool-tip does not work after some time.
https://jsfiddle.net/h8ow63be/
var option = {
legend: false,
title: {
display: true,
},
onHover: function(evt) {
var item = myLineChart.getElementAtEvent(evt);
if (item.length) {
updateChart(data.datasets[0].data[item[0]._index].y)
}
},
animation: {
duration: 0
},
annotation: {
annotations: lines
},
scales: {
xAxes: [{
id: 'x-axis',
type: 'linear',
position: 'bottom',
ticks: {
max: 12,
min: 1,
stepSize: 1
}
}],
yAxes: [{
id: 'y-axis',
type: 'linear',
}],
}
};
I am trying to remove the border of the Chart without removing the labels ticks
I have searched for settings to do this however found none as the 'Display: false' will hide everything.
The chart I am using can be seen here:
https://codepen.io/paufar/pen/VOpZGQ
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
display: false
}],
xAxes: [{
gridLines: {
display:false
}
}]
}
}
Solved by using:
gridLines: { drawBorder: false }
Suppose I have two Y axes, labeled "foo" and "bar". These axes correspond to points along the same interval, e.g. weekly aggregates of foos and bars in say the last 12 weeks. Ideally you would mouseover one of these points along the line chart and the tooltip would display the data of the week in question for both foo and bar; this is how it works if you don't have more than one Y axes. In practice you have you mouseover the individual point to see only the data for that specific point.
For clarity, this is what my chart options look like:
const CHART_OPTIONS = {
scales:
{
xAxes: [{
ticks: {
display: false,
},
}],
yAxes: [
{
type: 'linear',
id: 'y-axis-0',
display: false,
position: 'left',
},
{
type: 'linear',
id: 'y-axis-1',
display: false,
position: 'right',
},
],
},
};
The chart data specifies a yAxisID of y-axis-0 and y-axis-1 respectively.
For those who haven't seen a chart with two Y axes, I've prepared a simple example.
So my question is if this can be done with Chart.js 2?
References:
Chartjs Docs: Tooltip Configuration - Interaction Modes
mode : index - Finds item at the same index. If the intersect setting is true,
the first intersecting item is used to determine the index in the
data. If intersect false the nearest item is used to determine the
index.
Update the chart options to include the tooltips configurations. Set the mode to index
tooltips : {
mode : 'index'
},
The updated options would look like this.
const CHART_OPTIONS = {
tooltips : {
mode : 'index'
},
scales:
{
xAxes: [{
ticks: {
display: false,
},
}],
yAxes: [
{
type: 'linear',
id: 'y-axis-0',
display: false,
position: 'left',
},
{
type: 'linear',
id: 'y-axis-1',
display: false,
position: 'right',
},
],
},
};
Check updated sample which include tooltips mode set to index
Using v2.0beta of Chart.js
I'm having trouble displaying the xAxes and yAxes scale labels, as well as setting the yAxes min/max.
I need the yAxes ticks to range from -10 to 120 in increments of 10....this was super easy to do in v1 but I had to switch to v2.0 in order to invert the yAxes...help would be much appreciated :)
Tried setting it up in a jsfiddle but couldn't get it to work, sorry.
Here's my Line object:
var chart = new Chart(context, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [
{
position: "top",
scaleLabel: {
display: true,
labelString: "Frequency (Hz)",
fontFamily: "Montserrat",
fontColor: "black",
},
ticks: {
fontFamily: "Montserrat",
}
}
],
yAxes: [
{
position: "left",
scaleLabel: {
display: true,
labelString: "dB",
fontFamily: "Montserrat",
fontColor: "black",
},
ticks: {
fontFamily: "Montserrat",
reverse : true,
min: -10,
max: 120,
},
}
],
},
}
});
A bit late answer but Chart.js v2.0beta doesn't seem to support those tick options well.
I updated your fiddle. I updated Chart.js v2.0beta to Chart.js v2.5, which is the latest Chart.js for now.
Your tick options should look like
ticks: {
min: -10,
max: 110,
stepSize: 10,
reverse: true,
},
I know you were asking for set boundaries, but with my chart I do not know what the scale is so I look at the data and get the Hi/Low and adjust the chart to match the data.
var hi = data.datasets[3].data[0];
var lo = data.datasets[1].data[data.datasets[1].data.length - 1];
ticks: {
max: hi,
min: lo,
stepSize: 10
}
}
Hope this helps someone.