Custom Data Summary

If you’d like to create your own Data Summary bars with your own styling, the following examples might help you get started.



Design V1:
https://github.com/cloud9charts/knowi-code-samples/blob/master/custom-visualization-examples/custom-data-summary-v1

Design V2:
https://github.com/cloud9charts/knowi-code-samples/blob/master/custom-visualization-examples/custom-data-summary-v2

Here are some instructions for layout behavior:
- if you want blocks to have some minimum width they can not shrink less then: "min-width: 150px;" property for ".knowi-widget" class should be enabled
- if you want widget's container to have it's own horizontal scroll: "max-width: 100%;" and "overflow: auto;" properties for ".knowi-widgets-container" class should be enabled
- if you don't want blocks to be all of the same width, but want every block to have width of it's own content: "flex-basis: 0;" property on ".knowi-widget" class should be disabled, and "flex-shrink: 0;" property on ".knowi-widget" class should be enabled

If you need drilldown behavior from this custom widget, please see https://docs.knowi.com/hc/en-us/community/posts/4403667277715-Drilldowns-from-Custom-Widgets.