I am trying to make this screenshot using BizCharts. In this, the x-Labels will always be fixed and the data will be shown accordingly. If for any day there is no data there will be no bar on that day in the graph.
This is what my data looks like:
data=[
{
"date": "Tuesday",
"name": "Battery Materials",
"totalWeight": 150
},
{
"date": "Tuesday",
"name": "Consumer Batteries",
"totalWeight": 1423
},
{
"date": "Wednesday",
"name": "High Voltage",
"totalWeight": 75.5
},
{
"date": "Friday",
"name": "Consumer Battery",
"totalWeight": 1338
}
]
I tried this but it does not show Monday, Thursday, and Saturday.
<Chart height={400} padding="auto" data={data} autoFit>
<Interval
adjust={[
{
type: 'stack',
},
]}
color="name"
position="date*totalWeight"
/>
<Tooltip shared />
</Chart>
How can I define the x-Axis as an array ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] and accordingly display the data?
https://bizcharts.net/product/BizCharts4/demo/312
I have also tried adding default JSON objects with totalWeight=0 but the tooltip shows the wrong count.
const data = [
{
"date": "Monday",
"name": "Battery Materials",
"totalWeight": 0
},
{
"date": "Monday",
"name": "Consumer Battery",
"totalWeight": 0
},
{
"date": "Monday",
"name": "High Voltage",
"totalWeight": 0
},
{
"date": "Tuesday",
"name": "Battery Materials",
"totalWeight": 0
},
{
"date": "Tuesday",
"name": "Consumer Battery",
"totalWeight": 0
},
{
"date": "Tuesday",
"name": "High Voltage",
"totalWeight": 0
},
{
"date": "Wednesday",
"name": "Battery Materials",
"totalWeight": 0
},
{
"date": "Wednesday",
"name": "Consumer Battery",
"totalWeight": 0
},
{
"date": "Wednesday",
"name": "High Voltage",
"totalWeight": 0
},
{
"date": "Thursday",
"name": "Battery Materials",
"totalWeight": 0
},
{
"date": "Thursday",
"name": "Consumer Battery",
"totalWeight": 0
},
{
"date": "Thursday",
"name": "High Voltage",
"totalWeight": 0
},
{
"date": "Friday",
"name": "Battery Materials",
"totalWeight": 0
},
{
"date": "Friday",
"name": "Consumer Battery",
"totalWeight": 0
},
{
"date": "Friday",
"name": "High Voltage",
"totalWeight": 0
},
{
"date": "Saturday",
"name": "Battery Materials",
"totalWeight": 0
},
{
"date": "Saturday",
"name": "Consumer Battery",
"totalWeight": 0
},
{
"date": "Saturday",
"name": "High Voltage",
"totalWeight": 0
},
{
"date": "Sunday",
"name": "Battery Materials",
"totalWeight": 0
},
{
"date": "Sunday",
"name": "Consumer Battery",
"totalWeight": 0
},
{
"date": "Sunday",
"name": "High Voltage",
"totalWeight": 0
},
{
"date": "Tuesday",
"name": "Battery Materials",
"totalWeight": 150
},
{
"date": "Tuesday",
"name": "Consumer Battery",
"totalWeight": 1423
},
{
"date": "Wednesday",
"name": "High Voltage",
"totalWeight": 75.5
},
{
"date": "Friday",
"name": "Consumer Battery",
"totalWeight": 1338
}];
Is there any alternative framework for displaying the Week or Month bar chart in React?
