Power Plus - Renderer Chart

The Chart Renderer displays data as interactive charts using Chart.js, a popular open-source charting library. It supports bar charts, line charts, doughnut/pie charts, polar area charts, radar charts, scatter plots, and bubble charts. Charts are fully interactive — visitors can hover over data points to see tooltips, and the chart re-renders in real time when filters change.

The Chart renderer is unique among the framework’s renderers because it doesn’t render individual items as visual elements (like cards or table rows). Instead, it aggregates all data items into a single chart visualization, where each item contributes one data point. This makes it perfect for dashboards, analytics pages, weather displays, sales reports, and any use case where data is best understood as a visual trend or distribution.

Configuration

Data Configuration

Each dataset has:

Chart Options

Layout Options

Advanced

How It Works

1. The datasource provides an array of data items (just like for any other renderer).

2. For each item, the Labels expression is evaluated to produce an X-axis label (or segment label).

3. For each item, each Dataset’s Data expression is evaluated to produce a Y-axis value (or segment size).

4. The chart is rendered using Chart.js with the combined labels and dataset values.

5. When filters change, the chart re-renders with only the matching data points. This is especially powerful for time-series data — a filter can switch between “Forecast” and “History” views.

The chart canvas is contained within the list’s container and respects the list’s loading, empty, and error states. If the datasource returns zero items after filtering, the chart disappears and the list’s empty state message is shown.

Examples

Weather Line Chart with Dual Datasets

A time-series chart showing temperature and wind speed from a weather API. This is one of the framework’s showcase examples:

Datasource (JSON):

Name: chart_datasource
URL:  https://api.open-meteo.com/v1/forecast?latitude=48.15&longitude=11.38&past_days=10&hourly=temperature_2m,windspeed_10m
JSON Query: $map($.hourly.time, function($v, $i) {
  {
    "id": $i,
    "time": $v,
    "temp": $.hourly.temperature_2m[$i],
    "wind": $.hourly.windspeed_10m[$i],
    "millis": $toMillis($v & ":00"),
    "humidity": $.hourly.relativehumidity_2m[$i]
  }
})

Chart Renderer:

Name: chart_renderer
Chart Type: line
Labels: [[ $fromMillis(object.millis, "[D01]/[M01] [H01]:[m01]") ]]
Items Per Page: 800
Datasets:
  - Label: Temperature [°C]
    Data: [[ object.temp ]]
    Border Color: #FF0201 (100% opacity)
    Background Color: #FF0201 (80% opacity)
  - Label: Windspeed [km/h]
    Data: [[ object.wind ]]
    Border Color: #6FA8DC (100% opacity)
    Background Color: #6FA8DC (80% opacity)
Advanced Config: {"options":{"pointRadius":0,"fill":true,"interaction":{"mode":"nearest","intersect":false}}}

The Advanced Config customizes Chart.js behavior: - pointRadius: 0 — hides the individual data point dots (there are hundreds of hourly points, showing dots would be cluttered). - fill: true — fills the area under each line with the dataset’s background color, creating an area chart effect. - interaction.mode: "nearest" + intersect: false — the tooltip appears when hovering anywhere near a data point, not just exactly on it. This makes the chart much easier to interact with.

Weather Chart with Time Filter

Add a manual filter to let visitors toggle between forecast and historical data:

Filter Module:
  Name: time_filter
  List Name: chart_list
  Style: Tabs
  Disabled Filter: true (shows "All" option)
  Filters:
    - Name: forecast
      Label: Forecast
      Operator: >=
      Property Name: millis
      Value: [[$millis()]]
    - Name: history
      Label: History
      Operator: <
      Property Name: millis
      Value: [[$millis()]]

The $millis() JSONata function returns the current time in milliseconds. “Forecast” filters to data points where millis >= now (future), and “History” filters to data points where millis < now (past). The chart re-renders instantly with only the matching time range because the data is already loaded client-side.

Bar Chart from HubDB

A bar chart comparing revenue vs. target across regions:

Renderer Module:
  Name: sales_chart
  Chart Type: bar
  Labels: [[ object.values.region ]]
  Items Per Page: 25
  Datasets:
    - Label: Revenue
      Data: [[ object.values.revenue ]]
      Background Color: #4285F4 (80%)
      Border Color: #4285F4 (100%)
    - Label: Target
      Data: [[ object.values.target ]]
      Background Color: #34A853 (60%)
      Border Color: #34A853 (100%)
  Options:
    Y-Axis Stacked: false

Each HubDB row represents a region. The chart shows two bars per region (revenue and target) side by side. If you set Y-Axis Stacked: true, the bars would stack on top of each other instead.

Doughnut Chart for Distribution

A doughnut chart showing the distribution of items by category:

Renderer Module:
  Name: distribution_chart
  Chart Type: doughnut
  Labels: [[ object.values.category ]]
  Datasets:
    - Label: Distribution
      Data: [[ object.values.count ]]
      Background Color: (automatically varied per segment by Chart.js)

Doughnut and pie charts work best with a small number of segments (3–8). The labels become the segment legend, and the data values determine segment size.

Chart Types

Advanced: Custom Chart.js Configuration

The Chart.js Config field accepts a JSON string that is deep-merged with the auto-generated configuration. This gives you access to the full Chart.js API for advanced customization.

Remove Data Point Dots and Add Area Fill

{
  "options": {
    "pointRadius": 0,
    "fill": true,
    "interaction": {
      "mode": "nearest",
      "intersect": false
    }
  }
}

Add Axis Labels and Grid Customization

{
  "options": {
    "scales": {
      "y": {
        "beginAtZero": true,
        "title": { "display": true, "text": "Revenue (€)" },
        "grid": { "color": "rgba(0,0,0,0.1)" }
      },
      "x": {
        "title": { "display": true, "text": "Quarter" }
      }
    }
  }
}

Customize Legend and Animation

{
  "options": {
    "plugins": {
      "legend": {
        "position": "bottom",
        "labels": { "padding": 20 }
      }
    },
    "animation": {
      "duration": 1500,
      "easing": "easeOutBounce"
    }
  }
}

The deep-merge means your custom config overrides only the properties you specify — everything else keeps its auto-generated default. See the Chart.js documentation for all available options.

Combining with Filters

Charts and filters create particularly compelling interactive data visualizations. Because client-side filtering happens instantly (no network request), the chart updates in real time as the visitor changes filters. This feels like a mini data exploration tool:

• Time range filter — toggle between forecast/history, this week/this month/this year

• Category filter — show/hide datasets or filter data points by category

• Search — even search works with charts, filtering data points to those matching the search term

This is one of the unique strengths of the Power Plus framework: the same filter and sort modules that work with card and table renderers also work with charts, with zero additional configuration.