Chart widget reference

Chart annotaties, datalabels, point acties en sankey

Deze pagina beschrijft de geavanceerde chartdelen: annotation schema, datalabel plugin-opties, click-interacties, sankey instellingen en native ECharts-opslag.

Chart hub Core chart opties Datalabels Annotaties Point acties Native ECharts

Chart annotaties, datalabels, point acties en sankey overzicht screenshot placeholder — Maak hier een screenshot van het hoofdscherm voor Chart annotaties, datalabels, point acties en sankey overzicht, met de belangrijkste controls en een representatieve zichtbare state.

1. Datalabel instellingen

Key	Waarden	Beschrijving
`dataLabelsEnabled`	boolean	Master toggle.
`dataLabelsDisplay`	string	Toegestane waarden: `auto`, `true`. `auto` of altijd tonen.
`dataLabelsScope`	string	Toegestane waarden: `all`, `first`, `selected`. Toepassing op datasets.
`dataLabelsDatasets`	string[]	Alleen bij `scope=selected`.
`dataLabelsComparisonOnly`	boolean	Render labels alleen in comparison context.
`dataLabelsColor`, `dataLabelsBackgroundColor`, `dataLabelsBorderColor`	string	Kleuren van labelbox.
`dataLabelsBorderWidth`, `dataLabelsBorderRadius`	number	Randopties labelbox.
`dataLabelsAnchor`, `dataLabelsAlign`	anchor/align waarden	Positie van labels t.o.v. datapunt.
`dataLabelsFontSize`, `dataLabelsFontBold`	number/bool	Typografie instellingen.
`dataLabelsOffset`, `dataLabelsPrefix`, `dataLabelsSuffix`	number/string	Offset en tekstwrappers.

2. Annotaties

Algemene validatie

Bij annotationsEnabled=true moet minstens 1 annotatie bestaan.
Elke annotatie heeft een unieke key nodig.
Lege of dubbele keys blokkeren save.

Type: line

axis: x of y.
valueMode: static, min, max, average, trend.
Bij static is value verplicht.
lineStyle=dotted wordt als borderDash opgeslagen.

Line label opties

labelEnabled, labelText, labelShowValue.
Styling: label color/background/border/font/rounded.
Label content wordt opgeslagen als dashviewLabelTemplate.

Type: doughnutLabel

centerSource: total of custom.
Bij custom is tekst verplicht.
Ondersteunt value formatting: number/currency/date etc.
Ondersteunt styling, offsets, border en fonts.

3. Point interacties

Instelling	Waarden	Beschrijving
`pointClickEnabled`	boolean	Activeert set-filter actie op datapoint click.
`pointFilterKey`	string	Filterkey die wordt gezet.
`pointValueSource`	string	Toegestane waarden: `label`, `dataset`, `value`. Bron van filterwaarde bij click.
`pointNavigateEnabled`	boolean	Activeert navigatieactie op datapoint click.
`pointNavigateTo`	string	Doel-URL voor navigatie.

4. Sankey mode

Key	Beschrijving
`sankey.fromField`, `sankey.toField`	Bron- en doelknoopvelden.
`sankey.valueField`	Flowwaardeveld.
`sankey.colorField`	Optional veld voor kleurmapping.
`sankey.colorMode`	`gradient`, `from`, `to`.
`sankey.nodePadding`, `sankey.nodeWidth`, `sankey.iterations`	Layout tuning.
`sankey.usePageColors`	Gebruik page-kleurenpalet.

5. Native ECharts-opslag

Configuratiebron

De chart editor toont geen apart ECharts JSON-veld.
Gebruik de normale chartvelden voor annotaties, datalabels en interacties.
Directe ECharts-aanpassingen kunnen nog via options.echartsOptions in de volledige widget-JSON.

Mergegedrag

Editorvelden worden opgeslagen als native echartsOptions.
Bij conflicten blijven editor-kernwaarden voor annotaties en datalabelkernkeys leidend.
Annotaties uit de editor worden vertaald naar native ECharts markeringen.
Oude chartOptions blijven alleen legacy compatibility input.

6. Voorbeeld: line + annotation + point action

{
  "kind": "line",
  "xField": "order_date",
  "yField": "revenue",
  "agg": "sum",
  "annotations": {
    "annotations": {
      "target_line": {
        "type": "line",
        "scaleID": "y",
        "value": 100000,
        "borderColor": "#f97316",
        "borderWidth": 2,
        "label": {
          "display": true,
          "content": "Target",
          "dashviewLabelTemplate": "Target",
          "dashviewLabelShowValue": true
        }
      }
    }
  },
  "pointActions": [
    { "type": "set-filter", "key": "region", "valueSource": "label" },
    { "type": "navigate", "url": "/details" }
  ]
}