A diverging bar chart is a type of bar chart that can be used to visualize the spread between values, generally positive and negative.
See examples.
import { DivergingBarChart } from '@vannizhang/react-d3-charts'
--------------------- | ---------------------------------------------------- | ---------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
---|---|---|---|
data | DivergingBarChartDataItem[] |
- | The data used to render the bar chart. |
showTooltip | boolean (optional) |
false | Determines whether to show a tooltip when the user hovers over a bar element. |
showStickyLabelText | boolean (optional) |
false | if true, show label text that will be sticky to the top of chart container. |
yScaleOptions | YScaleOptions (optional) |
- | Options used to customize the scale function for the y-axis. |
bottomAxisOptions | BottomAxisOptions (optional) |
- | Options used to customize the x-axis at bottom. |
leftAxisOptions | LeftAxisOptions (optional) |
- | Options used to customize the y-axis at left. |
fill | string (optional) |
- | The fill color of the bar rectangles. |
innerPadding | number (optional) |
0.2 | The inner padding determines the blank space between bands. |
width | number (optional) |
- | The width of the chart container. If not provided, it will fit the width of the parent container. |
height | number (optional) |
- | The height of the chart container. If not provided, it will fit the height of the parent container. |
margin | SvgContainerMargins (optional) |
{top: 15, right: 15, bottom: 30,left: 30,} |
Custom margin space around the chart. |
onBarClick | (data:PointerEventDataItem)=>void (optional) |
- | Emits when user clicks a Bar element. The PointerEventDataItem object contains the index of the bar element that is clicked and the x position of the click event. |
onBarMouseEnter | (data:PointerEventDataItem)=>void (optional) |
- | Emits when user hovers a Bar element. The PointerEventDataItem object contains the index of the bar element that is hovered and the x position of the hover event. |
onBarMouseLeave | ()=>void (optional) |
- | Emits when user moves the pointer out of Bar elements. |
Here is an example of a Diverging Bar Chart:
<DivergingBarChart
data={[
{
x: 'Trees',
y: -40,
tooltip: 'this is a tooltip',
fill: 'green',
},
{
x: 'Water',
y: -10,
tooltip: 'this is a tooltip',
fill: 'dodgerblue',
},
//...
]}
/>
The x
field of DivergingBarChartDataItem
can also be a number
<DivergingBarChart
data={[
{
x: 2018,
y: -40,
tooltip: 'this is a tooltip',
},
{
x: 2019,
y: -10,
tooltip: 'this is a tooltip',
},
//...
]}
/>
Here is an example of customizing fill
color and innerPadding
for the bar rectangles; and the width
, height
of the chart container.
<DivergingBarChart
fill={'orange'}
innerPadding={0.05}
width={450}
height={300}
data={[
{
x: 2018,
y: -40,
tooltip: 'this is a tooltip',
},
//...
]}
/>
Set showTooltip
to true to show a tooltip when the user hovers over a bar element.
Plase make sure the tooltip
field is included in each DivergingBarChartDataItem
.
<DivergingBarChart
showTooltip={true}
data={[
{
x: 'Trees',
y: -40,
tooltip: 'this is a tooltip',
fill: 'green',
},
//...
]}
/>
You can provide a custom format function mapping a value from the axis Domain to a formatted string for display purposes:
<DivergingBarChart
bottomAxisOptions={{
shouldRotateTextLabels: true,
// a format function to convert default value (e.g. 'Trees') into a different format (e.g. 'Change of Trees')
tickFormatFunction: (val: number | string) => {
if (typeof val === 'number') {
val = val.toString();
}
return `Change of ${val}`;
},
}}
data={[
{
x: 'Trees',
y: -40,
},
//...
]}
/>
Here is an example of extend ticks on y axis and show them as grid lines:
<DivergingBarChart
leftAxisOptions={{
numberOfTicks: 3,
showGridLines: true
}}
data={[
{
x: 'Trees',
y: -40,
},
//...
]}
/>
You can provide a custom format function mapping a value from the axis Domain to a formatted string for display purposes. Here is an example of adding '%' to the end of tick label text.
<DivergingBarChart
leftAxisOptions={{
tickFormatFunction: (domainValue, index) => {
return domainValue + '%';
},
}}
data={[
{
x: 'Trees',
y: -40,
},
//...
]}
/>
Here is an example of using customized options for Y Scale.
You can provide a custom domain
used to create the scale function for the y-axis. If not provided, the maximum value of the domain will be determined by the maximum absolute values of the y
property among all items. The minimum value will be the negative value of the maximum value.
<DivergingBarChart
yScaleOptions={{
domain: [ -200, 200 ]
}}
data={[
{
x: 2018,
y: -40,
},
//...
]}
/>
Here is an example of showing sticky label text for each bar.
<DivergingBarChart
data={[
{
x: 2018,
y: -40,
labelOnTop: '2018'
},
//...
]}
showStickyLabelText={true}
/>
Here is an example of adding custom pointer events to the Diverging Bar Chart
<DivergingBarChart
data={[
{
x: 'Trees',
y: -40,
tooltip: 'this is a tooltip',
fill: 'green',
},
//...
]}
onBarClick={(d)=>{
alert(`clicked bar element at index of ${d.index}`);
}}
onBarMouseEnter={(d)=>{
console.log(`hovered bar element at index of ${d?.index}`)
}}
onBarMouseLeave={()=>{
console.log(`pointer has left bar elements`)
}}
/>