Chart Types: Bar

What it looks like

How to use this chart type

chartType: 'bar'

Note: this chart type expects your api to return an array of values that is the same length as your chartBounds range with each value corresponding to a chartBound value

Example

If your chartBounds are [2001, 2016] the calculated range will be:

[2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016]

and your api should return an array of length 16 in the same order as the chartBounds:

[3.09, 19.18, 1.24, 10.07, 8.3, 80.77, 0, 37.9, 20.67, 0.09, 13.43, 19.18, 17.23, 21.03, 20.85, 12.02]

Required properties

chartBounds [Array(2)]

This is the range of the chart's y-axis. It should be an array of 2 (two) values, the upper and lower bound.

chartBounds: [2001, 2016]

Optional Properties

valueAttribute [String]

The application expects your api to return an array, but you can also return an object where your return array is a property nested in that object. You must use the valueAttribute property to tell the app where to look for the correct property.

This should be a string that describes the path to the value from the object returned from the api. Nested objects should be separated by a .

Example

Your api response looks like this:

  {
    data: {
      attributes: {
        value: [
          3.09,
          19.18,
          1.24,
          10.07,
          8.3,
          80.77,
          0,
          37.9,
          20.67,
          0.09,
          13.43,
          19.18,
          17.23,
          21.03,
          20.85,
          12.02
        ]
      }
    }
  }

The value is the array that you would like to use to create the bar chart so your valueAttribute would be 'data.attributes.value'

color [String]

A valid css color value. This controls the color of the bars.

  color: '#000000'