I have a bar chart that takes data according to the year. I take the current name of the year from the main component as follows:
App:
<DonateChart year={this.state.active_menu}/>
DonateChart:
<Bar
data={{
labels: this.props.year === 2018 ? ['20.01', '20.02'] : [20.03],
datasets: [{
label: false,
fill: true,
backgroundColor: "#D9D9D9",
borderCapStyle: 'square',
pointBorderColor: "white",
data: this.props.year === 2018 ? ['2222', '3333'] : ['4444'],
spanGaps: false,
},
{
label: false,
fill: true,
backgroundColor: "#00ACE5",
borderCapStyle: 'square',
pointBorderColor: "white",
data: this.props.year === 2018 ? ['2222', '3333'] : ['4444'],
spanGaps: false,
}],
}}
options={{
responsive: false,
fullCornerRadius: false,
maintainAspectRatio: false,
tooltips: {enabled: false},
hover: {mode: null},
scales: {
yAxes: [{
stacked: true,
ticks: {
fontColor: 'black',
beginAtZero: true,
min: 0,
max: 5000,
stepSize: 1000,
fontFamily: 'HelveticaNeueCyr',
fontSize: 10,
},
gridLines: {
color: "rgba(0, 0, 0, 0.1)",
}
}],
xAxes: [{
stacked: true,
ticks: {
fontColor: '#black',
fontFamily: 'HelveticaNeueCyr',
fontSize: isMobile ? 8 : 10,
},
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
}]
},
legend: {
display: false
},
title: {
display: false,
}
}}/>
But when I switch the year and the new key is in the this.state.year, the chart is not drawn.
After that, I tried to create two different charts, and switch between them depending on the state, like this:
const bar1 = <Bar some code />
const bar2 = <Bar some code />
return(
this.state.year === 2018 ? bar1 : bar2
)
It also did not lead to anything, the schedule is distorted.
Tell me, please, how to implement such functionality correctly.
I would be grateful for any advice
In charts there is a regular redrawing method.
If i pass into it true, like this: redraw={this.state.update}, everything works fine!
Related
I am using React Apex-Charts to build a horizontal Bar Chart which currently looks like this:
I want to change the default sort order to be descending not Ascending such that the bar with the highest value is at the top while the smallest value is at the bottom. How do I accomplish this?
The following is my current code:
<Chart
type='bar'
height={550}
series= {[{
name: "Transaction",
data: [4000, 4300, 4408, 4700, 5400, 5800, 6900, 11000, 12000, 13800],
}]}
options={{
title:{ text:"Top 10 Schools By Transactions", style: { fontSize: 25 , fontFamily: "IBM Plex Sans", fontWeight:700}, },
colors: ["#295fab"],
yaxis: {
labels: {
formatter: (val) => {
return `${val}`;
},
style: {fontWeight:500, fontSize: "15", colors: ["#000"], fontFamily:"IBM Plex Sans", },
},
},
xaxis: {
categories: ["Jomo Kenyatta Univerity", "Technical Univaersity of Kenya", "University of Nairobi", "Kenyatta University", "Moi University", "Masinde Muliro University", "Maasai Mara University", "Maseno University", "Laikipia University",
],
labels:{
formatter: (val) => {
return `$${val}`;
},
style: {fontSize: "14",fontWeight:500, colors: ["#000"], fontFamily:"IBM Plex Sans" },
}
},
noData: {
text: "Loading...",
},
chart: {
fontFamily: 'IBM Plex Sans',
toolbar: {
tools: {
download: true,
selection: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: false | '<img src="/static/icons/reset.png" width="20">',
customIcons: []
},
},
},
dataLabels: {
enabled: true,
formatter: function (val) {
return `$${val}`;
},
offsetX: 40,
style: {
fontSize: '12px',
colors: ["#304758"],
}
},
plotOptions: {
bar: {
borderRadius: 16,
horizontal: true,
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
legend:{
fontSize: "16px",
fontFamily: "IBM Plex Sans"
}
}}
>
</Chart>
I am using react-chart-js2#3.3.0 with chart.js#3.6.2
When my dataset contains all 0s, the y-axis scales from -1 to 1 as such:
See Image
How do I make it start at 0 regardless? There seems to be a workaround for this: here and here but these solutions did not work for me. Basically, the workaround is to include a max in the ticks but it appears to just ignore it. I also tried upgrading to react-chart-js2#4 but for some reason it breaks so I reverted it back to 3.3.0.
Here is my options object:
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
layout: {
padding: 0,
},
scales: {
xAxes: [
{
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
padding: 18,
fontColor: theme.palette.text.secondary,
},
},
],
yAxes: [
{
gridLines: {
borderDash: [6],
borderDashOffset: [0],
display: false,
color: theme.palette.divider,
drawBorder: false,
zeroLineBorderDash: [6],
zeroLineBorderDashOffset: [0],
zeroLineColor: theme.palette.divider,
},
ticks: {
padding: 12,
fontColor: theme.palette.text.secondary,
beginAtZero: true,
min: 0,
max: 100,
},
},
],
},
tooltips: {
enabled: true,
mode: "nearest",
intersect: false,
caretSize: 6,
displayColors: false,
yPadding: 8,
xPadding: 16,
borderWidth: 4,
borderColor: theme.palette.common.black,
backgroundColor: theme.palette.common.black,
titleFontColor: theme.palette.common.white,
bodyFontColor: theme.palette.common.white,
footerFontColor: theme.palette.common.white,
callbacks: {
title: () => {},
label: (tooltipItem) => {
return `New Users: ${tooltipItem.yLabel}`;
},
},
},
};
the min and max have to be outside of the ticks:
y: { ticks: { }, min: 0, max: 100 }
I'm looking to create a drilldown using the CChartBar available in the CoreUI documentation here: https://coreui.io/react/docs/3.3/components/CCharts/
I need to be able to get the month from the bar that is clicked, and when the bar is clicked, it needs to take the user to another page. How do I get the information? How to I make each bar clickable to send the user to the table page?
Currently here is the html
<div className="chart-container">
<CChartBar
datasets={[
{
label: "Expected Expirations",
type: "bar",
data: expectedExpirations,
backgroundColor: "#949fe8",
borderColor: "blue",
fill: true,
order: 2,
},
{
label: 'Actual Expirations',
type: "bar",
data: actualExpirations,
backgroundColor: '#556ad1',
borderColor: "blue",
fill: true,
order: 1,
},
{
label: 'Target Expirations',
backgroundColor: '#352c2c',
data: targetExpirations,
type: "line",
borderColor: "black",
fill: true,
order: 0,
borderWidth: 2,
fill: "#352c2c",
pointBackgroundColor: "#352c2c",
lineTension: 0,
}
]}
labels={dateLabels}
onClick={(event) => drillDown(event)}
options={{
maintainAspectRatio: false,
responsive: true,
tooltips: {
enabled: true,
},
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: "Month"
}
}],
yAxes: [{
ticks: {
stacked: true,
beginAtZero: true,
stepValue: 10,
max: maxOfAllExpirations
},
scaleLabel: {
display: true,
labelString: "Number of Lease Expirations"
}
}]
},
}}
/>
I would like to be able to click on the bar, and get the data that is being charted, so I can pass the month to another page.
You can use the onClick function for this:
var options = {
type: 'bar',
data: {
labels: ["December 2020", "Januarie 2021", "Feb 2021", "March 2021", "April 2021", "May 2021"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 3, 3],
backgroundColor: 'pink'
}]
},
options: {
onClick: (evt, activeEls) => {
console.log(activeEls[0]._model.label)
console.log(activeEls[0]._model.label.split(" ")[0])
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
<div className = "chart-container" >
<CChartBar
datasets = {
[{
label: "Expected Expirations",
type: "bar",
data: expectedExpirations,
backgroundColor: "#949fe8",
borderColor: "blue",
fill: true,
order: 2,
},
{
label: 'Actual Expirations',
type: "bar",
data: actualExpirations,
backgroundColor: '#556ad1',
borderColor: "blue",
fill: true,
order: 1,
},
{
label: 'Target Expirations',
backgroundColor: '#352c2c',
data: targetExpirations,
type: "line",
borderColor: "black",
fill: true,
order: 0,
borderWidth: 2,
fill: "#352c2c",
pointBackgroundColor: "#352c2c",
lineTension: 0,
}
]
}
labels = {
dateLabels
}
onClick = {
(event) => drillDown(event)
}
options = {
{
onClick: (evt, activeEls) => {
console.log(activeEls[0]._model.label)
console.log(activeEls[0]._model.label.split(" ")[0])
},
maintainAspectRatio: false,
responsive: true,
tooltips: {
enabled: true,
},
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: "Month"
}
}],
yAxes: [{
ticks: {
stacked: true,
beginAtZero: true,
stepValue: 10,
max: maxOfAllExpirations
},
scaleLabel: {
display: true,
labelString: "Number of Lease Expirations"
}
}]
},
}
}
/>
``
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',
}
}
}}/>