im using ChartJs for displaying graph, and i try to costumize tooltip height using height on options based on ChartJs documentation.
https://www.chartjs.org/docs/latest/configuration/tooltip.html
but it doesnt work.
this is my option on my Chart.
options {
tooltips: {
mode: 'point',
intersect: true,
xPadding: 10,
yPadding: 10,
bodySpacing: 4,
backgroundColor: '#fff',
borderColor: '#eff6ff',
borderWidth: 2,
height: 10,
titleFontColor: '#1fb7c7',
bodyFontColor: '#333333'
}
}
i need to make the tooltip like this way.
There is no configuration naming 'height' for tooltips, so it will not work.
tooltips: {
height:10
}
Instead, you can use bodyFontSize, the height of the tooltip will be altered based on the value you assign to it.
tooltips: {
bodyFontSize:15
}
And use position and mode options to change the postion of the tooltips.
Related
I'm using the Nivo stacked bar chart to show a score range on the bar. To do this, I've used the markers prop. I've almost got it looking the way I'd like except the markers extend beyond the bar and it's not what I need.
When someone asked the same question on Github, it looks as though there isn't currently an easy way to do this. plouc, the creator of nivo said the following:
short answer, you cannot :/ However you can use an extra layer to achieve the same result, using the layers property and adding an extra component.
The photo attached is from the Nivo documentation on adding a marker (clicking on the Story tab will show basic code).
Here is the source code for the markers item. If you search for width throughout the document, you can see that it's set in the x2 of the line. Scrolling down further, you can see there is a strokeWidth property, but from what I can tell it only controls the thickness of the line, not how wide it is.
Can someone please let me know what I missed?
Here is my code. I am displaying two markers on my bar chart so there are two marker objects passed in. I've removed unrelated Bar props for simplification.
<NivoBar
data={data}
keys={['floor', 'pattern', 'ceiling']}
markers={[
{
axis: 'y',
position: 'right',
legendOffsetX: -34,
legendOffsetY: 0,
value: ceiling,
lineStyle: {stroke: 'red', strokeWidth: 2},
legend: `${ceiling}%`,
legendOrientation: 'horizontal',
textStyle: {fill: 'orange', fontWeight: 'bold'}
},
{
axis: 'y',
position: 'right',
legendOffsetX: -34,
legendOffsetY: 0,
value: floor,
lineStyle: {stroke: 'red, strokeWidth: 2},
legend: `${floor}%`,
legendOrientation: 'horizontal',
textStyle: {fill: 'orange, fontWeight: 'bold'}
}
]}
/>
So I'm trying to configure chart.js so that there is always a slight bar shown even for the lowest value. I can see there is a "minBarLength" property which the docs says to "Set this to ensure that bars have a minimum length in pixels." but I can't seem to get this working?
Here's a sandbox using the latest version of chart.js and with the use of this property as shown here:
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
minBarLength: 4,
backgroundColor: "blue"
}
]
}
However, the lowest value is still not being displayed on the graph:
I should also note that I am aware of the "beginsAtZero" property but I don't wish to use this as this can make it difficult displaying charts that have large values.
Any help would be greatly appreciated!
Simply tell your yAxes to beginAtZero by extending the options as follows:
options: {
title: {
display: true,
text: "Custom Chart Title"
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
you probably do not have this issue anymore, but if anyone reads this.
I am using "chart.js": "3.8.0". When you set the min of the y-Axis for example to 1 you have to set the attribute "base" of the dataset to 1 as well so that minBarLength can work.
I have setup my line chart like this:
How can I remove the green color from the background and make it transparent
Set fill property as false in Dataset options
datasets: [
{
label: "",
fill: false,
.....
.......
data: [65, 59, 80, 0, 56, 55, 40],
}
]
You can refer this fiddle:
https://jsfiddle.net/red_stapler/u5aanta8/1/
Also Reffer chartJs Docs
https://www.chartjs.org/docs/latest/charts/line.html
I'm working with Chart.js and creating line charts. I can't seem to get rid of the line above every chart coordinate. See the picture below. Which setting do I need to change to get rid of them? Thanks.
Click me
Here is what the chart variable looks like
var chart = new Chart(chartx, {
type: 'line',
data: {
labels: labels,
datasets: [{
data: data,
fill: false,
borderColor: 'rgb(0,0,0)',
borderWidth: 1,
lineTension: 0,
pointStyle: 'dash'
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
animation: false,
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
legend: {
display: false,
}
},
});
This is because you put pointStyle: 'dash' in your dataset attributes.
See Chart.js doc about LineChart data structure (pointStyle is at the last row of the table) :
The style of point. Options are 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using drawImage.
You have to choose between the different options.
Note that there is no none option.
If you want to remove the point style, you can :
Set the pointRadius attribute of your dataset to 0 (like in this fiddle).
Import an image as stated in the second part of the blockquote, which is empty (like this one).
visualization.PieChartwithpieHole, I just want to give some custom text insidepieHole` is this possible? Any idea how to do his?
My code is
var chart6 = new google.visualization.PieChart(document.getElementById('chart6'));
chart6.draw(data, {width: 650, height: 259, title: 'Browser bounce rate',
colors:['#058DC7','#50B432','#ED561B','#EDEF00','#24CBE5','#64E572'],
areaOpacity: 0.1,
pieHole: 0.4,
hAxis: {textPosition: 'in', showTextEvery: 5, slantedText: false, textStyle: { color: '#FFFFFF', fontSize: 10 } },
pointSize: 5,
chartArea:{left:0,top:30,width:"100%",height:"100%"}
});
There are no chart options that will let you put text in the hole; you have to layer other elements on top of your chart.
If you don't have to worry about older versions of IE, you can actually layer the HTML under the chart instead of on top, and set the chart's backgroundColor option to "transparent". This will let the text show through the hole, but won't block any mouse interactions with the chart. If you have to code for IE < 9 as well, you have to layer on top (at least in IE < 9), as the Visualization API does not support transparency in IE < 9.