On this page you will find instructions on how to set up a Bar Chart.

Bar Charts are ideal to compare values of the same category for different items of another category (e.g. Participants by state) or to compare value changes over a period of time for a single category (e.g. Participants by year).

How to add a configuration

If your needed configuration is not listed here, check out https://nivo.rocks/

Click on the Additional Settings Button and Edit Dashboard on the dashboard. The edit buttons for the widgets on this dashboard will now be visible.
Open the edit mode of the chart
a popover will open. Click on the type of chart you want to edit (one chart widget can hold several charts).
click on settings and the chart editor opens.

When opening the Chart Editor, you have the possibility to change the chart configuration by entering code snippets in the Configuration.

The changes will be displayed in the Preview on the right.

Configuration must always be enclosed in curly brackets and if there more configurations than one seperated by a comma.

Example:

{
  indexBy: 'value',
  colorBy: 'index'
}

Colors

Change the colors for each element of a data series. If there are more elements than colors, the color selection starts from the top.

New matching color palettes can be created here: coolers.co

{
  indexBy: 'value',
  colorBy: 'index',
  colors: [
    '#003874',
    '#8fbd3e',
    '#A7C6DA',
    '#A53F2B',
    '#A68383',
    '#9BC28C'
  ]
}

Change color of labels

The color needs to be in the Hex format.

labelTextColor: '#ffffff'

Maximum Value

Adjust the maximum value of the x-axis

maxValue: 20000

Titel of axis and Adjustment

{
  axisBottom: {
    legend: 'Number of enrolments',
    legendOffset: 50
  },
  axisLeft: {
    legend: 'Year',
    legendOffset: -80
  }
}

Horizontal

Horizontal display of bars.

layout: 'horizontal'

Grouped

groupMode: 'grouped'

Stacked

groupMode: 'stacked'

Show percentage

showPercentage: tru

Add absolute/percentage value switch

{
 showPercentageToggle: true,
 indexBy: 'value',
 colorBy: 'index',
 arcLabelsTextColor: '#FFFFFF',
 axisLeft: {    
 tickValues: 5  
 }
}

Legend

legends={[
            {
                dataFrom: 'keys',
                anchor: 'bottom-right',
                direction: 'column',
                translateX: 107,
                translateY: 0,
                symbolSize: 17
            }
            ]}

anchor: ' ' : Defines legend anchor relative to chart's viewport.

Options: ‘top-left’, ‘top', ‘top-right’, ‘left’, ‘center’, ‘right’, ‘bottom-left’, ‘bottom’ and 'bottom-right’.

direction: 'column' : Legend direction, must be one of 'column' or 'row'.

translateX: : Placement of the legend on the x-axis

translateY: : Placement of the legend on the y-axis

Logaritmic scaling

valueScale: {
    type: 'symlog'
  }

Rotation of x-axis label

  axisBottom: {
    tickRotation: '-90'
  }

Axis labels for non-integer values

When the aggregation returns non-interger values the following code snippet needs to be entered.

axisLeft: {
    type: 'integer'
  }

Number of values in the Y-axis

axisLeft: {
    tickValues: 3
  }

Axis Labels


  axisBottom: {
    legend: 'Applicants',
    legendOffset: '-20'
  },
  axisLeft: {
    legend: 'City',
    legendOffset: -90
  }

Note: the font size function does not affect labels

Reframe Knowledge Base

Bar Chart

Analytics