I have created the column chart with Google map. Have to remove baseline... attached the image file.
I tried, but didnt get it. any idea appreciated.
You can define baselineColor in the vAxis options
vAxes: {
0: {
(...)
gridlines: {color: 'transparent'},
baselineColor: 'transparent',
(...)
},
},
You can define baseline in the vAxis options
vAxes: {
0: {
(...)
gridlines: {color: 'transparent'},
baseline: 'none',
(...)
},
},
Related
I am using ChartJS but I can't figure out how to get rid of the white box in the tooltip. What setting/option will set remove the border/white outline or at least let me set the color?
Thank you!
data_sets.push({
data: date_list["data_counts"],
label: date_list["name"],
fill: true,
backgroundColor: transparentizeColor,
borderColor: newColor,
pointBackgroundColor: newColor,
pointBorderColor: newColor,
})
my_chart = new Chart(ctx, {
type: 'line',
data: {
labels: data["date_labels"],
datasets: data_sets
},
options: {
tooltips: {
intersect: false,
},
elements: {
point: {
radius: 0
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
precision: 0,
suggestedMax: 3,
beginAtZero: true
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
}
}, );
There's indeed no option for this, but you can workaround it.
The color of the white outline is controlled by the multiKeyBackground tooltip option. By setting this to be fully transparent (#00000000 or rgba(0, 0, 0, 0)), and disabling the border on the dataset, it'll at least look better (though still not perfect).
As of this writing (Chart.js 3.9.1), control over the display properties of the tooltip legend items can be done using tooltip callbacks. There are a few examples in the docs.
tooltip: {
intersect: false,
mode: 'index',
callbacks:{
labelColor: function(context) {
return {
borderColor: 'rgba(0, 150, 0)',
backgroundColor: 'rgba(0, 150, 0)',
borderWidth: 3,
borderRadius: 2,
}
},
}
},
For example, like the legend item Current is here:
Callbacks are an extremely powerful way to customize charts in Charts.js
I remember I once had this problem as well, but I can't remember an answer, neither I found one after I searched for it...
The only solution I have is using an custom tooltip.
You can alter this JSFiddle I found. They use a circle with border-radius: 5px in the css-class .chartjs-tooltip-key. Remove this line and you have a rectangle.
Either take the whole custom tooltip or use the parts you need.
As shown above, the letter spacing in my Chart.js is very large. I have no clue as to why it is that way - here is my config:
var myLineChart = new Chart(ctx, {
type: 'line',
data: lineChartData,
options: {
responsive: true,
scales: {
yAxes: [
{
gridLines: {
color: '#354657',
},
ticks: {
fontFamily: 'Open Sans',
},
},
],
xAxes: [
{
gridLines: {
color: '#354657',
},
ticks: {
fontFamily: 'Open Sans',
},
},
],
},
},
});
The letter spacing is this large no matter what font I use. Is there a method to reduce it?
Not sure if you've resolved this or not yet, but thought I'd give you a heads up. I had a similar question and linked it to this, the answer for me was removing the devicePixelRatio setting that I had set, but given you have the problem in the browser version (I imagine), have you tried setting devicePixelRatio = 2? It might be the fix for this.
I want to remove the grid lines from a Chart.js 2.6.0 (Chart.bundle.js) line chart. It appears however that the entire gridLines key doesn't work for me.
Code snippet:
var options = {
scales: {
xAxis: [
{
gridLines: { // does that work?!
display: false,
},
},
],
yAxis: [
{
gridLines: {
display: false,
},
},
],
},
};
I also tried to change color or pattern of grid lines, just to see if it works. Nothing inside the gridLines key had any effect on them.
Is there a bug, or I am lacking sleep too badly?
xAxes not
xAxis
you spelled the properties wrong under scales
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.