Dashview Docs

Chart widget reference

Chart x-label templates

Charts ondersteunen samengestelde x-labels via xLabelFields en xLabelTemplate. De template engine is dezelfde als bij table templates, maar hier toegepast op categorie-as labels.

Chart hub Complete functie reference Setup Voorbeelden
Chart x-label templates overzicht screenshot placeholder
Chart x-label templates overzicht

Maak hier een screenshot van het hoofdscherm voor Chart x-label templates overzicht, met de belangrijkste controls en een representatieve zichtbare state.

Maak hier een screenshot van het hoofdscherm voor Chart x-label templates overzicht, met de belangrijkste controls en een representatieve zichtbare state.

1. Setup en validatie

Inputvelden

  • xLabelFields[] bepaalt welke fields beschikbaar zijn voor labelopbouw.
  • xLabelTemplateJson bevat de JSON pipeline.
  • Template wordt opgeslagen als xLabelTemplate in widget options.

Save-validatie

  • JSON moet object zijn (geen array).
  • ops moet aanwezig en niet leeg zijn.
  • Bij fout stopt save met Invalid chart label template.

Combinatie met x/y formats

  • xLabelTemplate beïnvloedt labeltekst, niet numerieke axis math.
  • xValueFormat blijft verantwoordelijk voor as-waardeformatting.
  • xScale.valueTemplate en xLabelTemplate kunnen samen bestaan.

Enginefuncties

  • Alle ops zijn gedeeld met table label templates.
  • Inclusief string, regex, math, date, style en mapping functies.
  • Volledige op-lijst: centrale template reference.

2. Minimaal schema

{
  "value": { "field": "month" },
  "ops": [
    { "op": "trim" },
    { "op": "upper" }
  ]
}

3. Chartgerichte voorbeelden

{
  "xLabelFields": ["month"],
  "xLabelTemplate": {
    "value": { "field": "month" },
    "ops": [
      { "op": "title" },
      { "op": "wrap", "value": "Periode: {value}" }
    ]
  }
}
{
  "xLabelTemplate": {
    "value": { "field": "order_date" },
    "ops": [
      { "op": "date", "format": "MMM yyyy" }
    ]
  }
}
{
  "xLabelTemplate": {
    "value": { "field": "region" },
    "ops": [
      {
        "op": "switch",
        "cases": {
          "eu": "Europa",
          "na": "Noord-Amerika",
          "apac": "APAC"
        },
        "default": "Overig"
      }
    ]
  }
}