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 assinging 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;

Customisation #

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

  • colour - The colour 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.