bar-chart-react v1.0.2

react-bar-chart

A bar chart component. This was made specifically for viewing data over a period of time (monthly and annually). The only prop that is necessary is data. data is expected to be an array of numbers. The numbers are used to create bars on a canvas element.

Example

import BarChart from 'react-bar-chart';

const DataPlot = () => {
  let data = [3, 5, 1, 7, 9, 12, 4];
  return <BarChart data={data} />
};

Additional props

To customize the look of the chart, various props can be provided.

• labelColor: the color of the graph's label (default #eee)
• countColor: the color of each bar's count (default #eee)
• barColor: the color of the bars in the graph (default #f3ab10)
• backgroundColor: the color of the canvas element (default #3a3a3a)
• baseColor: the color of the x-axis (0) (default #eee)
• gridColor: the color of horizontal lines on the graph (default #555)
• fronFamily: the font family for labels (default Arial)
• padding: the padding inside the canvas element (default 30)
• width: the width of the canvas element (default 1000)
• height: the height of the canvas element (default 500)
• noResultText: the text to display if no data is provided (default "Nothing to display")
• showCount: whether or not the counts should be displayed (default false)

Multiple bars per column

It may be useful to have multiple bars per column. An example of this might be the number of tickets completed by different employees. By passing in additional parameters, the view can be further customized to improve readability of the data.

• multi: whether or not there are multiple bars per column
• multiMetaData: data that helps build the display

multiMetaData

multiMetaData is expected to be an object in the following shape:

{
  uniqueLabel: {
    color: 'red' // 'red', '#FF0000', 'rgba(255, 0, 0, .7)'
  }
}

Each key on multiMetaData should be one of the sources of a data point. In a comparison of 'Completed' vs 'Uncompleted' tickets, you would provide an object such as this:

{
  Completed: {
    color: '#00FF00'
  },
  Uncompleted: {
    color: '##0000FF'
  }
}

When providing multiple data sources, the data provided should not be an array of numbers. It is expected to be a nested array of Objects. Continuing with the 'Completed' vs 'Uncompleted' example, the data would be something like this.

const data = [
  [
    {
      label: 'Completed',
      count: 5
    },
    {
      label: 'Uncompleted',
      count: 2
    }
  ]
]

Notice that each label is also a key on multiMetaData. This is how the component decides what color each bar should be.

When dealing with dynamic sources for the data points, it may be useful to use a deterministic function to create a color. If a color is not deterministic, it may change colors when a re-render is triggered.

Example of getting a deterministic color based for a string:

const uniqueColor = str => {
  // generates a deterministic value for a given string
  let vals = [];
  const vowels = new Set(['a', 'e', 'i', 'o', 'u']);
  let vowelCount = 0;
  let consonantsCount = 0;
  let captureLength = Math.floor(str.length / 3);
  for (let i = 0; i < 3; i++) {
    let currentStr = str.substr(i * captureLength, (i + 1) * captureLength)
    let val = 0;
    for (let j = 0; j < currentStr.length; j++) {
      if (vowels.has(currentStr[j])) {
        vowelCount++;
      } else {
        consonantsCount++;
      }
      val = (val + currentStr.charCodeAt(j)) % 255;
    }
    vals.push(Math.max(val, 100))
  }
  vals[0] = Math.max(100, vals[0] + (consonantsCount * 10) - (vowelCount * 7));
  vals[1] = Math.max(100, vals[1] - (consonantsCount * 8) + (vowelCount * 11));
  vals[2] = Math.max(100, vals[2] + (consonantsCount * 6) - (vowelCount * 6));
  return `rgb(${vals[0]}, ${vals[1]}, ${vals[2]})`;
};