Table Row with Stacked Bar

<StackedBarSingleChartTableRow  year={2017}
                                name={"Fund Name"}
                                description={"Fund Description"} 
                                descriptionLink={{to:"#", name:"Link to no where"}}
                                maxValue={100}
                                chartData={[{'Onshore':60, 'Offshore': 50, 'GOMESA':100}]} />

Fund Name

Fund Description

Link to no where

Onshore:60
Offshore:50
GOMESA:100
Total:210

This pattern displays a table with a fund or source, a description, and a horizontal bar chart. It allows us to show a total amount (the full width of the bar) and relative amounts for components of the total (through color variations). For example, the disbursements horizontal bars display the relative volumes for geographic origin (onshore, offshore) and/or authorization (e.g. GOMESA) that comprise the total disbursement to a given fund.

How to use

This pattern is best used to display totals and portions of those totals in a single bar. It is spatially efficient, because it uses a single bar to display multiple volumes. It should be used when there are three or more component portions of a total. If there is one discrete amount, this chart pattern is unnecessary. If there are only two values, showing two separate bars may be more intuitive than using the stacked pattern.

Color contrast is a challenge when using stacked charts. The contrast between the bar colors must be sufficient to visually distinguish them. But each color should also have sufficient contrast with the chart's background color to be accessible.

This balance can be difficult to achieve with certain color palettes. Consequently, the chart color must not be the only way to see and understand the relative volumes; the numeric values should be listed as well, without interacting with the chart.

Chart data

This is an array of objects that will be used to populate the stacked bar

Max value

You can pass a max value to the bar chart that will be used to relatively size the bar to that max value vs the max value of the chart data only.

CSS for colors:

Each colored box next to the data name can be colored using css.

Developer Details:

This stacked bar uses D3 to render the data visualization. The react component is just a wrapper that links to D3 by lifecycle events.

Props/Methods

NameDescriptionTypeRequiredDefault
name

This will appear on the left side of the table row

stringnoN/A
description

This will appear on the left side of the table row under the name

stringnoN/A
descriptionLink

This will appear on the left side of the table row under the dscription and will be a link to a url

shapenoN/A
chartData

Array of key value pairs

arrayyesN/A
maxValue

A number to use for relative sizing of the bar. Default is the max value of the chart data array

numbernoN/A
barHeight

Specify the height of the bar with units in a string format

stringnoN/A
displayNames

The display names for the data including sort order

objectnoN/A
className

Specify a class name to be added to the outer element

stringnoN/A