data-display chart

Chart

Zero-dependency SVG bar / line / area.

$ ndui add chart

Bar — monthly revenue (12 months)

Revenue

Monthly recurring revenue

Source

<noundry-chart type="bar"
               title="Revenue"
               description="Monthly recurring revenue"
               data='@JsonSerializer.Serialize(monthly)'
               x-axis="label"
               height="280">
    <noundry-chart-series key="value" label="Revenue" color="indigo" />
</noundry-chart>

Line — daily active users

DAU

Last 30 days

Source

<noundry-chart type="line"
               title="DAU"
               description="Last 30 days"
               data='@JsonSerializer.Serialize(dau)'
               x-axis="label"
               height="280">
    <noundry-chart-series key="value" label="DAU" color="emerald" />
</noundry-chart>

Area — storage used

Storage

GB consumed

Source

<noundry-chart type="area"
               title="Storage"
               description="GB consumed"
               data='@JsonSerializer.Serialize(storage)'
               x-axis="label"
               height="280">
    <noundry-chart-series key="value" label="Storage" color="violet" />
</noundry-chart>