Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

This type will show a horizontal bar chart to use for visualizing progress or similar data. You can pass a configuration object where you can specify which keys from the entries the chart should use, and their color in the chart.

Info

The stacked bar chart relies on data fields that are sourced as number.
Therefore, double check, if your data fields are really a number - not just a string.

...

Code Block
- label: 'Progress'
  key: ''
  type: 'stackedBarChart'
  showInTableHeader: false
  showInDetailList: true
  options:
    defaultColor: '#0022dd',
    stackedBarChart:
      - key: 'Remaining'
        color: '#C6DDF0'
      - key: 'Spent'
        color: '#C99DA3'
      - key: 'Excess'
        color: '#996888'

If you have an entry with these data fields:

...

A stacked bar chart type with the above configuration will create a diagram that shows 50% Remaining “Remaining” in color #C6DDF0, 40% Spent “Spent” in color #C99DA3 and 10% Excess “Excess” in color #996888.