Bar Graph — lunaDOM Docs

The <luna-bar-graph> component displays data as vertical or horizontal bar charts with support for multi-series and stacking.

Paths

/lunadom/components/bar-graph/bar-graph.js

REQUIRED

Example

Vertical · Goal Line

Horizontal · Sorted

Grouped Multi-Series

Stacked Percentage

Custom Colors · Rounded

Negative Values

Customization

Attributes
data - JSON array of data points with label and value(s)
direction="vertical" - Direction of bars (vertical, horizontal)
height="260" - Height of the chart in pixels
goal - Goal line value
goal-label - Label for goal line
value-labels - Show value labels on bars
sorted - Sort bars by value
legend - Show legend for multi-series
stacked - Stack multi-series bars
stacked-percentage - Show stacked bars as percentages
x-label - Label for x-axis
y-label - Label for y-axis

CSS Variables
--luna-bar-graph-bar-color - Bar color
--luna-bar-graph-bar-hover-color - Bar hover color
--luna-bar-graph-bar-radius - Bar border radius
--luna-bar-graph-goal-color - Goal line color
--luna-bar-graph-bar-negative-color - Color for negative values

Example Code

<luna-bar-graph data='[{"label":"Jan","value":42},{"label":"Feb","value":78}]' value-labels height="260" > </luna-bar-graph>  <luna-bar-graph data='[{"label":"React","value":68},{"label":"Vue","value":41}]' direction="horizontal" sorted value-labels > </luna-bar-graph>  <luna-bar-graph data='[ {"label":"Q1","values":{"Revenue":120,"Expenses":80}}, {"label":"Q2","values":{"Revenue":145,"Expenses":95}} ]' legend value-labels > </luna-bar-graph>  <luna-bar-graph data='[{"label":"Mon","values":{"Mobile":55,"Desktop":30}}]' stacked stacked-percentage legend > </luna-bar-graph>  <luna-bar-graph data='[...]' goal="75" goal-label="Target" value-labels > </luna-bar-graph>  <luna-bar-graph data='[...]' style=" --luna-bar-graph-bar-color: #6366f1; --luna-bar-graph-bar-radius: 6px; " > </luna-bar-graph>