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 de merge-regels van advancedOptionsText.

Chart hub Core chart opties Datalabels Annotaties Point acties Advanced JSON

1. Datalabel instellingen

Key	Waarden	Beschrijving
`dataLabelsEnabled`	boolean	Master toggle.
`dataLabelsDisplay`	auto/true	`auto` of altijd tonen.
`dataLabelsScope`	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`	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. Advanced options JSON merge-regels

Inputvalidatie

advancedOptionsText moet een geldig JSON object zijn.
Array of primitive values zijn ongeldig en blokkeren save.
Bij fout: Chart options JSON is invalid.

Mergegedrag

Editor genereert basis chartOptions en merge-t daarna advanced opties.
Bij conflicts blijven editor-kernwaarden voor annotaties en datalabelkernkeys leidend.
Conflicterende advanced plugins.annotation wordt verwijderd als editor annotaties bevat.
Voor datalabels worden kritieke overrides opgeschoond vóór merge.

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" }
  ]
}