I have a situation where i need a custom renderer that returns component like below. One is the value that needs to have pattern as background and hence return two rect component and is called renderBChart. the other simply returns a rect component. But the problem i am facing is if one of the value is changed to negative, this rect doesnt load for its height is negative. What would be the solution to render the graph if any one value is negative with this custom renderer?
`renderBChart( data ){
let bgColor = '';
if(data.key === 'A'){
bgColor = '#646464'
}
if(data.key === 'B'){
bgColor = '#427c99'
}
if(data.key === 'C'){
bgColor = '#92b8d6'
}
if(data.key === 'D'){
bgColor = '#bfd6eb'
}
if(data.key === 'E'){
bgColor = '#bebebe'
}
return(
<svg>
<defs>
<pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4">
<path d=" M0,4 l4,-4 M3,5 l2,-2"
style={{"stroke": "white", "strokeWidth":"1", "backgroundColor":`${bgColor}`}} />
</pattern>
</defs>
<rect x={data.x}
y={data.y} width={data.width}
height={data.height}
style={{"fill":`${bgColor}`}}
fill={bgColor}
/>
<rect x={data.x}
y={data.y} width={data.width}
height={data.height}
fill="url(#diagonalHatch)"
/>
</svg>
)
}
renderChart( data ){
let bgColor = '';
if(data.key === 'A){
bgColor = '#646464'
}
if(data.key === 'B'){
bgColor = '#427c99'
}
if(data.key === 'C'){
bgColor = '#92b8d6'
}
if(data.key === 'D'){
bgColor = '#bfd6eb'
}
if(data.key === 'E'){
bgColor = '#bebebe'
}
return
}`
render(){ const data =[ { "key":"A", "value1":-100, "value2":5.0 }, { "key":"B", "value1":-9.85, "value2":64.0 }, { "key":"C", "value1":0.0, "value2":31.0 }, { "key":"D", "value1":0.0, "value2":0.0 }, { "key":"Real Estate", "value1":0.0, "value2":0.0 }, { "key":"E", "value1":0.0, "value2":0.0 }, { "key":"F", "value1":0.0, "value2":0.0 } ]
return(
`
<XAxis
dataKey="key" orientation="bottom" axisLine={false}
style={{"font-size": "12px",
"font-weight": "bold",
"fill": "#000"}}
tickLine={false}
/>
<YAxis
dataKey="value1" orientation="left"
style={{"font-size": "12px",
"font-weight": "bold",
"fill": "#000"}}
padding={{top: 40}}
tickLine={false} axisLine={true} tickCount={7}
/>
<CartesianGrid stroke="#efefef" vertical={false}/>
<ReferenceLine y={0} stroke="#646464" isFront={true}/>
<Bar dataKey="value1" barSize={22}
shape={this.renderChart}
label={{ fill: "#000",
fontSize: 12,
fontWeight: "bold"
}}
/>
<Bar dataKey="value2" barSize={22}
shape={this.renderBChart}
label={{ fill: "#000",
fontSize: 12,
fontWeight: "bold"
}}
/>
</ComposedChart>
)}`
I have a situation where i need a custom renderer that returns component like below. One is the value that needs to have pattern as background and hence return two rect component and is called renderBChart. the other simply returns a rect component. But the problem i am facing is if one of the value is changed to negative, this rect doesnt load for its height is negative. What would be the solution to render the graph if any one value is negative with this custom renderer?
`renderBChart( data ){
let bgColor = '';
if(data.key === 'A'){
bgColor = '#646464'
}
if(data.key === 'B'){
bgColor = '#427c99'
}
if(data.key === 'C'){
bgColor = '#92b8d6'
}
if(data.key === 'D'){
bgColor = '#bfd6eb'
}
if(data.key === 'E'){
bgColor = '#bebebe'
}
}
renderChart( data ){
let bgColor = '';
if(data.key === 'A){
bgColor = '#646464'
}
if(data.key === 'B'){
bgColor = '#427c99'
}
if(data.key === 'C'){
bgColor = '#92b8d6'
}
if(data.key === 'D'){
bgColor = '#bfd6eb'
}
if(data.key === 'E'){
bgColor = '#bebebe'
}
return
}`
render(){ const data =[ { "key":"A", "value1":-100, "value2":5.0 }, { "key":"B", "value1":-9.85, "value2":64.0 }, { "key":"C", "value1":0.0, "value2":31.0 }, { "key":"D", "value1":0.0, "value2":0.0 }, { "key":"Real Estate", "value1":0.0, "value2":0.0 }, { "key":"E", "value1":0.0, "value2":0.0 }, { "key":"F", "value1":0.0, "value2":0.0 } ]return(
`
<XAxis
dataKey="key" orientation="bottom" axisLine={false}
)}`