Charts that feel like Grafana.

mbl-graph wraps ECharts in a Nuxt 4 module with a built-in toolbar: timespan presets, aggregation controls, chart type switching, and auto-refresh. Point it at an endpoint or pass static data.

Live component

Try it live

Install

terminal

npm install @madebylars.com/mbl-graph

Configuration

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@madebylars.com/mbl-graph'],
  // optional — default prefix is 'Mbl'
  mblGraph: { prefix: 'Mbl' },
})

Static data

pages/dashboard.vue

<script setup>
const data = [
  { timestamp: '2025-01-01T00:00:00Z', value: 142, label: 'requests' },
  { timestamp: '2025-01-01T01:00:00Z', value: 189 },
  // ...
]
</script>

<template>
  <MblGraph
    :data="data"
    title="API Requests"
    type="area"
    theme="dark"
    height="400px"
    :show-toolbar="true"
  />
</template>

Fetch from endpoint

Pass a url prop and mbl-graph calls it automatically with ?from&to&aggregation query params whenever the timespan changes.

pages/metrics.vue

<!-- Fetch data from your own endpoint -->
<MblGraph
  url="/api/metrics/requests"
  title="Live Metrics"
  type="line"
  :preset-ms="3_600_000"
  aggregation="5m"
  :refresh-interval="30"
/>

<!--
  mbl-graph will call:
  GET /api/metrics/requests?from=<ISO>&to=<ISO>&aggregation=5m
  Whenever timespan or aggregation changes.
-->

Events

pages/dashboard.vue

<MblGraph
  :data="data"
  @update:type="onTypeChange"
  @update:aggregation="onAggregationChange"
  @data-updated="onDataUpdated"
/>

Key props

Prop	Type	Default
type	'line' \| 'bar' \| 'area' \| 'pie'	'line'
data	DataPoint[]	undefined
url	string	undefined
title	string	undefined
aggregation	'1m'…'1d'	'1h'
refreshInterval	number (seconds)	0
height	string \| number	'400px'
showToolbar	boolean	true
theme	'dark' \| 'light'	'dark'
zoom	boolean	true