Counter Stock Element

You can use this Stock Element by extending the exported global: window.casthub.elements.counter

The Counter Stock Element renders a single Counter that comes with a background Chart to represent change in the count value over time. You can see it in-use in any of our Viewer Count Modules.

Setting the Count value

Setting the count value is as easy as assigning the count property of the Module to an integer. This will also add it as a data point for the background Chart, automatically updating and animating it to reflect the change. For example:

this.count = 5;

/**
 * Whilst the count will immediately reflect the following value,
 * the previous value will still be added as a data point for the
 * Chart.
 */
this.count = 10;

Customization

Currently the Stock Element is limited in customizability to the following properties:

  • color - The color used for the background Chart. Can be rgb(a) or hex.
  • max - An integer value of the maximum amount of data points the Chart can have.

These properties are reactive and can be updated at any point during the module lifecycle.