Chart widget reference

Chart widget: core opties, scales en datasets

Deze reference volgt de editordraft en build-logica voor chart widgets. Focus: data mapping, sort/grouping, style/rendering, color/value rules, axes en extra datasets.

1. Core data mapping en aggregatie

Chart optie-editor screenshot placeholder
Chart optie-editor
  • De editor verbindt datamapping, charttype, styling en annotaties in één configuratiepad.
  • Controleer mappings eerst met echte data voordat je visuele verfijningen toevoegt.
  • Annotaties en kleurregels zijn pas zinvol als assen en datasetstructuur stabiel zijn.
Bouw charts in vaste volgorde op: data, schaal, vormgeving en daarna pas accentlagen zoals annotaties.

Default draftwaarden

  • kind=bar, xField=date, yField=value, agg=sum.
  • responsive=true, legendDisplay=true, tooltipEnabled=true.
  • valueFormat=number, valueDigitsInfo=1.0-2.
  • Opgeslagen charts bevatten gegenereerde native instellingen onder options.echartsOptions.
Key Type Beschrijving
kindstringToegestane waarden: bar, line, pie, doughnut, polarArea, radar, scatter, bubble, sankey, bar3D, line3D, scatter3D, surface. Charttype.
xField, yField, zField, sizeField, sizeAggstringPrimaire x/y-velden; 3D charts gebruiken ook zField. sizeField stuurt de bubbelradius en optionele sizeAgg aggregeert de bubbelgrootte voor rijen die op dezelfde x/y-positie vallen. Bij sankey blijven x/y ook de fallback voor van/naar.
aggstringToegestane waarden: sum, avg, count, countDistinct. Aggregatie op yField.
groupBystringSeriegroepering op extra dimensie.
groupLimitnumberMax aantal groups.
xSort, groupSortstringToegestane waarden: label asc, label desc, value asc, value desc. Sortering op labels of waardes.
groupIncludestring[]Whitelist van groepen die getoond worden.
groupKindOverrides[]arrayPer group override naar bar of line, optioneel met label/kleur.
datasetLabelstringLabel van hoofdserie.
primaryDatasetOrdernumberRendervolgorde hoofdserie.
titleBoldbooleanVetgedrukte widgettitel.
filterobjectWidgetspecifiek filterobject.

Coördinaat-gebaseerde chartmodi

  • scatter en bubble lezen ruwe punt-rijen in plaats van gegroepeerde metric-buckets.
  • bubble gebruikt xField, yField en optioneel sizeField.
  • bar3D, line3D, scatter3D en surface lezen ruwe punten met xField, yField en zField. Voor bar3D en surface worden dubbele x/y-posities volgens agg samengevoegd.
  • sizeAgg ondersteunt sum, avg, count, countDistinct, min en max voor herhaalde bubbels op dezelfde coördinaten.
  • line en bar schakelen ook over naar ruwe punten wanneer yScale.type = "category", zodat stringwaarden echt op de Y-as kunnen renderen.
  • Wanneer een categorie-as ook expliciete labels heeft, renderen point-mode-grafieken alleen waarden uit die lijst en houden ze precies die volgorde aan.
  • Voor bar charts met een categorische Y-as kiest Dashview standaard horizontale bars, tenzij je indexAxis expliciet overschrijft.

2. Style, rendering en gedragsopties

Groep Keys Beschrijving
LegendlegendDisplay, legendPosition, legendReverseLegend zichtbaarheid/positie.
TooltiptooltipEnabled, tooltipTitleFormat, tooltipBodyFormatTooltip gedrag en formattering.
DatalabelsdataLabelsFormatOptioneel token-gebaseerd tekstsjabloon voor datalabels, met dezelfde placeholderstijl als tooltip-opmaak.
SeriesborderWidth, pointRadius, lineFill, lineStopAtDataEndLijn/bar/point rendering.
3Dgl3D, zScale3D box/camera/shading-instellingen, camera-offsets via viewCenterX/viewCenterY, Z-asopties, barSize, lineWidth, symbolSize en wireframe voor surface charts.
BarsbarPercentage, categoryPercentage, borderRadiusBar breedtes en rounding.
Pie/Doughnutcircumference, rotationCirkelhoeken in graden (intern genormaliseerd).
ComparisonscomparisonReplaceGroupingCompare sets als primaire groupingbron gebruiken.
Date guardminDateRangeDaysMinimum datarange voor renderlogica.
PalettecolorPerCategoryUnieke kleur per categorie forceren.

Bar hover glow

  • barHoverGlowEnabled, barHoverGlowBlurPx.
  • barHoverGlowIntensityLight, barHoverGlowIntensityDark.
  • barHoverGlowColorLight, barHoverGlowColorDark.

3. ECharts-native opslag

  • Nieuwe en opnieuw opgeslagen chart widgets bewaren native ECharts-instellingen onder options.echartsOptions.
  • De datasource-mapping blijft in Dashview-velden zoals xField, yField, agg en groupBy, zodat live data en filters blijven werken.
  • De editor heeft geen apart ECharts JSON-veld; gebruik de normale chartvelden of pas options.echartsOptions direct aan via de volledige widget-JSON.
  • echartsOptions is een template voor ECharts-opties zoals legend, tooltip, grid, xAxis, yAxis, grid3D, xAxis3D, yAxis3D, zAxis3D en series-styling.
  • Runtime-data zoals series.data, sankey links en dynamische axis-data worden opnieuw uit de datasource opgebouwd en niet uit stale JSON overgenomen.
  • Oude configs met chartOptions blijven leesbaar; zodra je zo'n chart opent en opslaat, schrijft Dashview de ECharts-native vorm terug.

4. Color rules en value rules

Rule type Opties Details
Page color rulesusePageColorRules, pageColorSourceToegestane waarden voor pageColorSource: label, group, value, y. y is bedoeld voor 3D charts; bij 3D matcht value op de Z-aswaarde.
Widget color rule kindkindToegestane waarden: value, range, index-range, date. Alle vier worden ondersteund en genormaliseerd voor runtime.
Range rulemin, max, scale, inclusivity flagsscale toegestane waarden: absolute, percent.
Date ruledateModedateMode toegestane waarden: after, afterOrOn, before, beforeOrOn.
Page value rulesusePageValueRulesHergebruikt page value replacements.
Widget value rulesvalueRules[]Zelfde schema als table replacements.

5. X/Y/Z scales en value formats

xScale, yScale en voor 3D charts zScale gebruiken hetzelfde schema; alleen gevulde velden worden opgeslagen.

Scale key Waarden Beschrijving
typestringToegestane waarden: category, linear, logarithmic, time, timeseries. As type.
display, stacked, beginAtZerobooleanBasis as-instellingen.
min, maxstring/numberAs grenzen.
positionstringToegestane waarden: left, right, top, bottom. As positionering.
titlestringAstekst.
timeUnitstringToegestane waarden: year, quarter, month, week, day, hour, minute, second. Unit voor tijdassen.
autoTimeUnitMin, autoTimeUnitMaxstringToegestane waarden: year, quarter, month, week, day, hour, minute, second. Onder- en bovengrens voor automatische X-as tijdseenheden. Zonder waarden gebruikt Dashview dag tot jaar.
labelMaxLength, labelStartIndexintegerLabel truncatie/startoffset.
valueFormatstringToegestane waarden: string, number, decimal, currency, percent, date, datetime, time. Formattering voor ticks op deze as.
valueDigitsInfostringNumerieke precisie.
valueCurrencyCode, valueCurrencyDisplaystringValuta formattering. valueCurrencyDisplay toegestane waarden: symbol, symbol-narrow, code.
valueDateFormatstringDatumformat op aslabels.
valuePrefix, valueSuffix, valueTemplatestringCustom prefix/suffix/template per tick.
labelsstring[]Optionele vaste categorielabels. In point-mode-grafieken werken ze ook als allowlist en render-volgorde voor categoriewaarden.

Dataset value formats buiten scales

  • valueFormat bepaalt standaard formattering van datasetwaardes.
  • xValueFormat en yValueFormat kunnen per aswaarde overriden.
  • Voor numerieke formats gebruikt runtime alleen *DigitsInfo als format numeriek is.
  • Voor currency/date formats vallen x/y defaults terug op algemene value* velden.

6. Extra datasets

Key Beschrijving
id, yFieldDataset identifier en verplicht y-veld.
label, color, orderSeriepresentatie en render order.
kindToegestane waarden: line, bar.
lineStyleToegestane waarden: solid, dashed, dotted.
dataLabelsEnabledPer extra dataset datalabel override.
dataSourceUidOptionele andere datasource voor deze dataset.
shareAxis, axisDelen van primaire as of eigen asconfiguratie.
timeShiftafterTo, beforeFrom, afterToKeepFrom.
borderWidth, pointRadiusDataset-specifieke draw overrides.