I have built a graph of bar chart with some data.
the current result I have is:
and what I want is to delete the names below the xAxes in the bar chart.
I viewed the react-chartjs-2 documentation and tried to change the options, also viewed Chart.Js documentation.
this is my options right now:
const options = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
xAxes: [
{
scaleLabel: {
display: false,
},
gridLines: {
display: false,
},
},
],
},
};
after a deep search I found the solution:
const options = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
xAxes: {
ticks: {
display: false,
},
},
},
The problem is in xAxes it was a list instead of object.
after the fix, this is how it looks:
Related
I am building a covid-19 tracker, but when data is displayed on the graph using react charts title is coming out to be undefined
This is my chart code
<div >
{data?.length > 0 && (
<Line
data={{
datasets: [
{
backgroundColor: "rgba(204, 16, 52, 0.5)",
borderColor: "#CC1034",
data: data,
},
],
}}
options={options}
/>
)}
</div>
These are my option parameters
const options = {
legend: {
display: false,
},
elements: {
point: {
radius: 0,
},
},
maintainAspectRatio: false,
tooltips: {
mode: "index",
intersect: false,
callbacks: {
label: function (tooltipItem, data) {
return numeral(tooltipItem.value).format("+0,0");
},
},
},
scales: {
xAxes: [
{
type: "time",
time: {
format: "MM/DD/YY",
tooltipFormat: "ll",
},
},
],
yAxes: [
{
gridLines: {
display: false,
},
ticks: {
// Include a dollar sign in the ticks
callback: function (value, index, values) {
return numeral(value).format("0a");
},
},
},
],
},
};
Although legend is set to false I am getting an error.
Please tell me where I am going wrong, that will be helpful.
Image of a chart.
You need to pass the label property here
data={{
datasets: [
{
backgroundColor: "rgba(204, 16, 52, 0.5)",
borderColor: "#CC1034",
data: data,
label: "your label" // <-- pass this
},
],
}}
I am trying to create a chart like this. Below is my chart code. However, I am unable to set a different color in the second bar. The first color in the first bar gets set in the second bar.
self.chart = {
type: 'horizontal-bar',
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: true,
callbacks: {
label: function (tooltipItem, _) {
return $filter('number')(tooltipItem.xLabel);
}
}
},
events: ['click', 'mousemove'],
hover: {
onHover: function(item, chartElement) {
item.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}
},
scales: {
xAxes: [{
scaleLabel: {
stacked: true,
display: true,
labelString: "Test"
},
ticks: {
stacked: true,
beginAtZero: true,
maxRotation: 0,
minRotation: 0,
callback: function (value) {
return $filter('number')(value);
}
}
}]
}
},
data: [[2,12], [5]],
labels: labels,
colors: [chartBlue, chartGreen],
datasetOverride: [{ stack: 1, fill: false }, { stack: 1, fill: false }]
}
This is the result I am getting.
I need to set a different color (for example yellow) in the second bar.
With colors you define the colors for datasets. With two colors you define two datasets. With your two arrays in data you have two datasets, that's why you can't see an additional color.
You need a third dataset for a third color, with 0 at the labels where you don't want a bar.
Check out the following example (Working example at JSBin):
var config = {
type: 'bar',
data: {
labels: ["January", "February", "March"],
datasets: [{
label: 'Dataset 1',
backgroundColor: 'black',
data: [0, 8, 4]
}, {
label: 'Dataset 2',
backgroundColor: "red",
data: [6, 2, 8],
}, {
label: 'Dataset 3',
backgroundColor: "blue",
data: [3, 0, 0]
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
Have you tried to add more data?
data: [[2,12], [5], [1], [4], [3]],
labels: labels,
colors: [chartBlue, chartGreen],
Try it and see what happens to the chart :)
After setting up a stacked horizontal bar chart using chartjs, the x-axis cannot be hidden. I have tried numerous ways to remove it like using "display:false" and making the text transparent but to no avail. Here is what it looks like and what I want it to look like:
https://imgur.com/a/mKYViUx
Thanks in advance~!
Current Chartjs code:
datasets: [
{
label: 'Example Data One',
data: [10],
backgroundColor: '#C4D156',
borderColor: "#ffffff",
borderWidth: 1.5
},
{
label: 'Example Two, etc',
data: [25],
backgroundColor: '#68A03F',
borderColor: "#ffffff",
borderWidth: 1.5
},
{
label: 'Three',
data: [55],
backgroundColor: '#2F9138',
borderColor: "#ffffff",
borderWidth: 1.5
}
]
};
},
options: {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
responsive: true,
scales: {
yAxes: [
{stacked: true},
],
xAxes: [
{stacked: true},
{gridLines: {
display:false
}
},
]
}
}
Hiding the label/text on the axis is done with that
options: {
...
scales: {
...
xAxes: [{
ticks: {
display: false //this will remove the label/text
}
}]
}
}
Image
This is my current result bar
But I need the content to be collapsed when clicked, the content is similar to the picture below
Give a link to some library or some solution
in advance thankful
Source
<HorizontalBar
data={{
barPercentage: 0.8,
labels: [
'Label1', //THIS ARR FOR ONLY FOR EXAMPLE
'Label2',
'Label3',
'Label4',
'Label5',
'Label6',
'Label7',
'Label8'
],
datasets: [{
legend: {
display: false
},
label: '',
data: [7305064, 7305064, 5294903, 1313290, 600300, 96571, 617650, -200000],
fill: false,
borderColor: "#18B9AB",
backgroundColor: '#7facf5',
hoverBackgroundColor: '#609af7',
barThickness: 20
}]
}}
options={{
tooltips: {
enabled: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
plugins: {
datalabels: {
color: '#EFEFEF',
}
}
}}/>
I'm using react-chartjs2 in react application. I want to remove extra space as follow in this image.
Here are my chart configuration options
// chart options
const options = {
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
color: ChartConfig.chartGridColor,
display: false
},
ticks: {
fontColor: ChartConfig.axesColor,
beginAtZero:true,
min: 0
}
}],
yAxes: [{
ticks: {
beginAtZero:true,
min: 0,
padding: 0,
display: false
},
gridLines: {
drawTicks: false,
drawBorder: false
}
}]
}
};