updateOptions

Updates the chart options by merging the new configuration with the existing one.

See updateOptions – ApexCharts Docs for more information.

Overview

Syntax

component.updateOptions(
    newOptions,
    [redrawPaths],
    [animate],
    [updateSyncedCharts],
    [maintainZoom],
    [syncProps]
)

Parameters

Type	Parameter	Description
Dictionary	newOptions	The configuration object to merge with the existing options.
Boolean	redrawPaths	Optional. Whether to redraw chart paths from the beginning or reuse existing paths on re-rendering. Default: False.
Boolean	animate	Optional. Whether to animate the chart on re-rendering. Default: True.
Boolean	updateSyncedCharts	Optional. Whether all charts in a group should update when one chart updates. Default: True.
Boolean	maintainZoom	Optional. Whether to maintain zoom if the chart is zoomed in. Default: True.
Boolean	syncProps	Optional. Whether to sync options with the Gateway's property model via websocket. Default: False.

Returns

None

Examples

Update Chart Options with Path Redraw Enabled

self.getSibling("apexchart").updateOptions({
  "chart": {
    "stacked": False,
    "toolbar": {
      "show": True
    },
    "type": "line",
    "events": {
      "animationEnd": False,
      "beforeMount": False,
      "mounted": False,
      "updated": False,
      "mouseMove": False,
      "mouseLeave": False,
      "click": False,
      "legendClick": False,
      "markerClick": False,
      "xAxisLabelClick": False,
      "selection": False,
      "dataPointSelection": False,
      "dataPointMouseEnter": False,
      "dataPointMouseLeave": False,
      "beforeZoom": False,
      "beforeResetZoom": False,
      "zoomed": False,
      "scrolled": False,
      "brushScrolled": False
    }
  },
  "dataLabels": {
    "enabled": False
  },
  "fill": {
    "opacity": 1
  },
  "markers": {
    "size": 0
  },
  "stroke": {
    "width": 3
  },
  "xaxis": {
    "type": "datetime"
  },
  "yaxis": {
    "labels": {
      "formatter": "function (val) { return val.toFixed(2); }"
    }
  }
}, redrawPaths=True)

Update Chart Options Maintaining Zoom

self.getSibling("apexchart").updateOptions(newOptions={
  "chart": {
    "stacked": False,
    "toolbar": {
      "show": True
    },
    "type": "line",
    "events": {
      "animationEnd": False,
      "beforeMount": False,
      "mounted": False,
      "updated": False,
      "mouseMove": False,
      "mouseLeave": False,
      "click": False,
      "legendClick": False,
      "markerClick": False,
      "xAxisLabelClick": False,
      "selection": False,
      "dataPointSelection": False,
      "dataPointMouseEnter": False,
      "dataPointMouseLeave": False,
      "beforeZoom": False,
      "beforeResetZoom": False,
      "zoomed": False,
      "scrolled": False,
      "brushScrolled": False
    }
  },
  "dataLabels": {
    "enabled": False
  },
  "fill": {
    "opacity": 1
  },
  "markers": {
    "size": 0
  },
  "stroke": {
    "width": 3
  },
  "xaxis": {
    "type": "datetime"
  },
  "yaxis": {
    "labels": {
      "formatter": "function (val) { return val.toFixed(2); }"
    }
  }
}, maintainZoom=True)