MetricGraph

A metric graph for showing trend direction and compact historical context around one value.

Import

import { MetricGraph } from "@schukai/monster/source/components/data/metric-graph.mjs";

Source

View source code

Package

@schukai/monster

Since

4.11.0

Introduction

The Monster MetricGraph combines one current value with a compact sense of recent movement. Use it when a number needs lightweight trend context but a full chart would be too heavy for the available space.

When to use MetricGraph

Use it for trend-aware KPIs: Ideal for compact dashboard cards.
Use it when change direction matters: The mini-graph adds historical context without dominating the page.
Do not use it for detailed analysis: Rich exploration still needs a dedicated chart or table.

Metric Graph Simple

This is a monster-metric-graph control configured to visualize sales performance over the last 10 weeks using a bar graph. The main value “1,280 Units” represents the current total sales, while the secondary value “1,050 Units” serves as a comparison, such as from the previous period.

The bar graph is generated from the point series 85::88::92::99::130::115::140::110::120::101, showing weekly sales data. Each bar reflects one week’s value, allowing users to quickly identify trends, spikes, or drops in performance.

The title “Sales Last 10 Weeks” appears in the header, with “Product A” as subtext, helping users understand the context of the graph at a glance.

This visualization enhances metric readability by combining numeric data with clear visual cues, ideal for dashboards and performance monitoring interfaces.

Javascript

//import '@schukai/monster/source/components/data/metric-graph.mjs';<script type="module">//import '@schukai/monster/source/components/data/metric-graph.mjs';</script>

HTML

<monster-metric-graph
        data-monster-option-labels-title="Sales Last 10 Weeks"
        data-monster-option-labels-subtext="Product A"
        data-monster-option-values-main="1,280 Units"
        data-monster-option-values-secondary="1,050 Units"
        data-monster-option-values-points="85::88::92::99::130::115::140::110::120::101"
        data-monster-option-graphtype="bar">
</monster-metric-graph>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The monster-metric-graph component is built using the Shadow DOM, which encapsulates its internal structure and styling. By attaching a shadow root, the component’s inner elements are isolated from the global document context. This ensures that external styles or scripts cannot unintentionally affect its layout or behavior, maintaining consistent rendering across different environments.

Shadow DOM and Accessibility

Since the component is rendered within a shadow root, its internal structure is protected from external access. This encapsulation prevents direct manipulation or styling from outside the component, which helps maintain visual and functional integrity. Despite this isolation, the component is designed with full accessibility in mind, using proper ARIA roles and labels to expose meaningful information to assistive technologies.

Customizing Through Exported Parts

Although the Shadow DOM protects the component's internal structure, it allows for customization through exported parts. These parts expose specific internal elements that can be styled externally using the CSS part selector. This allows developers to customize the appearance without compromising encapsulation or structural integrity.

Available Part Attributes

control: Represents the root container of the entire metric graph control.
card: Styles the outer card structure that holds the header, value, and graph.
header: Targets the top section that displays the icon and title.
metric-value: Styles the primary numeric value shown in the graph.
metric-subtext: Applies styles to the subtext and optional secondary value.
metric-graph: Controls the styling of the inline SVG graph representation.

Below is an example of how to use CSS part attributes to customize different parts of the MetricGraph component.


monster-metric-graph::part(card) {
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

monster-metric-graph::part(metric-graph) {
    stroke: #3366cc;
    fill: rgba(51, 102, 204, 0.1);
}

Explanation of the Example

monster-metric-graph::part(card): Adds a white background, soft corners, and a light shadow to the graph card.
monster-metric-graph::part(metric-graph): Changes the stroke and fill of the SVG graph for a customized appearance.

Accessibility

Accessibility is a core feature of the monster-metric-graph component. It uses aria-labelledby and aria-describedby to make key information readable to screen readers. Additional descriptive text for the graph is included through visually hidden elements, ensuring all users can understand the graphical data regardless of their browsing context. The component also adheres to semantic structure and keyboard-friendly design.

HTML Structure

<monster-metric-graph></monster-metric-graph>

JavaScript Initialization

const element = document.createElement('monster-metric-graph');
document.body.appendChild(element);

Exported

MetricGraph

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

curve

string

undefined

The curve of the graph (step, smooth, bubble, bar, area, dot, lollipop, line)

values

object

Value definitions

values.value

number

undefined

The value of the metric

values.change

number

The change of the metric

values.secondary

number

The secondary value of the metric

values.points

array

2, 2, 2, 30, 5, 4, 4, 3, 3, 2, 2, 1, 1, 1, 1

The points of the metric

labels

object

Label definitions

labels.title

string

Title of the metric

labels.subtext

string

Subtext of the metric

classes

object

CSS classes

classes.dot

string

monster-theme-primary-1

CSS class for the dot

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Static methods

[instanceSymbol]()

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{MetricGraph}

Other methods

[updaterTransformerMethodsSymbol]()

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.