Novadesk Docs

Appearance

Histogram Element ​

The Histogram element draws compact bar-by-bar graphs from one or two data arrays.

Create one with ui.addHistogram() and the shared General Elements Options, General Tooltip Options, and Mouse Events Callback.

js
ui.addHistogram(options);

Table of Contents ​

Histogram Options ​

data ​

  • Type: number[]
  • Default: []
  • Description: Primary series values.

data2 ​

  • Type: number[]
  • Default: []
  • Description: Optional secondary series values.

INFO

When data2 is provided, overlap is drawn with bothColor, and non-overlap parts use primaryColor or secondaryColor.

autoRange ​

  • Type: boolean
  • Default: false
  • Description: Uses min/max from data automatically.

INFO

When autoRange is false, Histogram uses a fixed 0..100 range.

graphStart ​

  • Type: string
  • Default: "right"
  • Description: Start side for sample progression.

Valid values ​

  • "left"
  • "right"

graphOrientation ​

  • Type: string
  • Default: "vertical"
  • Description: Direction of graph sampling.

Valid values ​

  • "vertical"
  • "horizontal"

flip ​

  • Type: boolean
  • Default: false
  • Description: Flips drawing direction for the active orientation.

primaryColor ​

  • Type: string
  • Default: "rgba(0, 128, 0, 1)"
  • Description: Color for primary (data) bars.

secondaryColor ​

  • Type: string
  • Default: "rgba(255, 0, 0, 1)"
  • Description: Color for secondary (data2) bars.

bothColor ​

  • Type: string
  • Default: "rgba(255, 255, 0, 1)"
  • Description: Color used where primary and secondary overlap.

Runtime Notes ​

  • ui.addHistogram() requires an options object.
  • If id already exists, the previous element is replaced.
  • Data is sampled from newest values first.
  • In vertical mode, one sample is drawn per pixel column.
  • In horizontal mode, one sample is drawn per pixel row.
  • Histogram supports improved shape-aware hit testing. Enable pixelHitTest: true to use pixel-aware checks instead of only bounds.

Example ​

javascript
import { widgetWindow } from "novadesk";

new widgetWindow({
    id: "histogramExample",
    width: 980,
    height: 680,
    backgroundColor: "rgba(20, 24, 31, 0.96)",
    script: "ui/script.ui.js"
});