Number Formatting

Control how numeric values are displayed in chart labels, legends, and axes. Supports named presets with compound syntax and a subset of d3-format.

Format Syntax Reference

Named Presets

Preset Argument Default Example Input Output
number decimals 2 1234.567 1,234.57
number 0 0 decimals - 1234.567 1,235
compact sig digits 2 1234567 1.2M
compact 1 1 sig digit - 1234567 1M
currency USD currency code USD 1234.56 $1,234.56
currency EUR currency code - 1234.56 €1,234.56
currency USD compact compact currency 2 sig digits 1234567 $1.2M
currency EUR compact 1 compact, 1 sig digit - 1234567 €1M
percent decimals 1 0.456 45.6%
percent 0 0 decimals - 0.456 46%

d3-format Subset

Format Meaning Example Input Output
,.2f Comma separator, 2 decimals 1234.567 1,234.57
,.0f Comma separator, 0 decimals 1234.567 1,235
.1s SI prefix, 1 sig digit 1234567 1M
.2s SI prefix, 2 sig digits 1234567 1.2M
$,.2f Dollar sign, comma, 2 decimals 1234.567 $1,234.57
$,.0f Dollar sign, comma, 0 decimals 1234.567 $1,235
.1% Percent, 1 decimal 0.456 45.6%
.0% Percent, 0 decimals 0.456 46%

Chart-Level Formatting

Use value-format on the chart to set the default format for all values.

Currency Format

<dc-chart width="500" height="300" value-format="currency USD">
    <dc-bar value="1234567" label="Revenue"></dc-bar>
    <dc-bar value="876543" label="Expenses"></dc-bar>
    <dc-bar value="358024" label="Profit"></dc-bar>
</dc-chart>

Compact Format (Large Numbers)

<dc-chart width="500" height="300" value-format="compact 1">
    <dc-bar value="45000000" label="Q1"></dc-bar>
    <dc-bar value="52000000" label="Q2"></dc-bar>
    <dc-bar value="48000000" label="Q3"></dc-bar>
    <dc-bar value="61000000" label="Q4"></dc-bar>
</dc-chart>

Compact Currency

<dc-chart width="500" height="300" value-format="currency USD compact">
    <dc-bar value="1250000" label="Revenue"></dc-bar>
    <dc-bar value="875000" label="Expenses"></dc-bar>
    <dc-bar value="375000" label="Profit"></dc-bar>
</dc-chart>

d3-format: Dollar with No Decimals

<dc-chart width="500" height="300" value-format="$,.0f">
    <dc-bar value="85000" label="Budget"></dc-bar>
    <dc-bar value="72500" label="Spent"></dc-bar>
    <dc-bar value="12500" label="Remaining"></dc-bar>
</dc-chart>

Axis and Legend Formatting

Override the chart's format for axis labels and legend values using value-format on <dc-axis> or <dc-legend>.

Compact Axis Labels

<dc-chart width="500" height="350" value-format="$,.0f">
    <dc-axis position="left" value-format="compact 1"></dc-axis>
    <dc-bar value="2500000" label="Product A"></dc-bar>
    <dc-bar value="1800000" label="Product B"></dc-bar>
    <dc-bar value="3200000" label="Product C"></dc-bar>
</dc-chart>

Pie Chart with Formatted Legend

<dc-pie-chart width="500" height="350" show-value show-percent>
    <dc-legend position="right" value-format="currency USD"
               percent-format="percent 0"></dc-legend>
    <dc-pie-slice value="450000" label="North America"></dc-pie-slice>
    <dc-pie-slice value="280000" label="Europe"></dc-pie-slice>
    <dc-pie-slice value="175000" label="Asia Pacific"></dc-pie-slice>
    <dc-pie-slice value="95000" label="Other"></dc-pie-slice>
</dc-pie-chart>

Element-Level Formatting

Override formatting for individual elements using value-format on bars, slices, or other elements.

Mixed Formats Per Bar

<dc-chart width="500" height="300" value-format="number 0">
    <dc-bar value="125000" label="Units Sold"></dc-bar>
    <dc-bar value="4750000" label="Revenue" value-format="currency USD"></dc-bar>
    <dc-bar value="0.38" label="Margin" value-format="percent 0"></dc-bar>
</dc-chart>

Locale Support

Number formatting respects the browser's locale by default. You can override this with the locale attribute.

German Locale

<dc-chart width="500" height="300" locale="de-DE" value-format="number 2">
    <dc-bar value="1234.56" label="Q1"></dc-bar>
    <dc-bar value="2345.67" label="Q2"></dc-bar>
    <dc-bar value="3456.78" label="Q3"></dc-bar>
</dc-chart>

Euro Currency

<dc-chart width="500" height="300" locale="de-DE" value-format="currency EUR">
    <dc-bar value="45000" label="Budget"></dc-bar>
    <dc-bar value="38500" label="Spent"></dc-bar>
    <dc-bar value="6500" label="Remaining"></dc-bar>
</dc-chart>

Other Chart Types

Formatting works across all chart types including funnel and line charts.

Funnel with Compact Numbers

<dc-funnel-chart width="500" height="350" value-format="compact 2">
    <dc-funnel-stage value="100000" label="Visitors"></dc-funnel-stage>
    <dc-funnel-stage value="35000" label="Signups"></dc-funnel-stage>
    <dc-funnel-stage value="12000" label="Trials"></dc-funnel-stage>
    <dc-funnel-stage value="4500" label="Customers"></dc-funnel-stage>
</dc-funnel-chart>

Line Chart with Currency

<dc-chart width="500" height="350" value-format="$,.2f">
    <dc-line label="ACME Stock">
        <dc-point value="142.50" label="Mon"></dc-point>
        <dc-point value="145.75" label="Tue"></dc-point>
        <dc-point value="143.25" label="Wed"></dc-point>
        <dc-point value="148.00" label="Thu"></dc-point>
        <dc-point value="151.50" label="Fri"></dc-point>
    </dc-line>
</dc-chart>