I am facing issue of deprecated methods:
Chart.js:1990 bar chart: "scales.[x/y]Axes.maxBarThickness" is deprecated. Please use "dataset.maxBarThickness" instead
How this can be resolved?
I was using following way to set maxBarThickness of bar graph dynamically
this.barOptions.scales.xAxes[0]['barPercentage'] = 0.8;
But this is throwing warnings now.
Please share your suggestions!
This property is no longer part of the xAxis but it can be set directly on the dataset as explained in dataset configuration.
Please also see example usage.
data: {
datasets: [{
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 2,
data: [10, 20, 30, 40, 50, 60, 70]
}]
};
Related
Edit: This appears to only be an issue if you are using typescript. Thank you #LeeLenalee
I recently upgraded package versions
chart.js -- 3.2.1 -> 3.7.0
react-chartjs-2 -- 3.0.3 -> 4.0.1
Which broke my line chart:
<Line
data: {...}
options: {
pointRadius: 0,
pointHoverRadius: 5,
pointHitRadius: 20,
pointBackgroundColor: ...,
}
/>
The docs are fairly difficult to find this info. Even after I figured out how to change it and I look back at the docs I still can't make much sense of them.
Edit: Typescript error
It seems there is multiple ways to set the point options. For me I was able to set the global point options in options.elements.point.
<Line
data: {...}
options: {
elements: {
point: {
radius: 0,
hoverRadius: 5,
hitRadius: 20,
backgroundColor: ...,
}
}
}
/>
These options can also be set (or override global settings) in your dataset object as well for each line.
<Line
data: {
datasets: [{
pointRadius: 0,
pointHoverRadius: 5,
pointHitRadius: 20,
pointBackgroundColor: ...,
}]
}
/>
Is it possible to create a chart like this?
[![enter image description here][1]][1]
Thanks in advance
this is possible by adding the property pointRadius in your dataset object and give it an array for the radius of each point
Working example (with text on the Y axes as seems you want, to get the desired result each line will need to be a different dataset): https://jsfiddle.net/Leelenaleee/2gtndc3h/1/
dataset example:
{
label: '# of Votes',
data: ['', 'Request Added', 'Request Added', 'Request Added', 'Request Viewed', 'Request Viewed', 'Request Viewed'],
borderWidth: 1,
lineTension: 0,
pointRadius: [2, 4, 6, 18, 0, 12, 20],
}
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.
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