Apex Brush Chart default selection

Ignition
1

Hello,

I managed to create a brush chart using Apex Charts in Perspective but when I open my view containing this chart, the default selection I set (min and max) is not selected by default. I have to do a manual selection on the chart used for date range.
Here is the chart option parameters i use :

{
  "brush": {
    "enabled": true,
    "target": "chart1"
  },
  "dropShadow": {
    "blur": 10,
    "color": "#000",
    "enabled": false,
    "left": 7,
    "opacity": 0.2,
    "top": 18
  },
  "events": {
    "animationEnd": false,
    "beforeMount": false,
    "beforeResetZoom": false,
    "beforeZoom": false,
    "brushScrolled": false,
    "click": false,
    "dataPointMouseEnter": false,
    "dataPointMouseLeave": false,
    "dataPointSelection": false,
    "legendClick": false,
    "markerClick": false,
    "mounted": false,
    "mouseLeave": false,
    "mouseMove": false,
    "scrolled": false,
    "selection": false,
    "updated": false,
    "zoomed": false
  },
  "height": 350,
  "selection": {
    "enabled": true,
    "fill": {
      "color": "#24292e",
      "opacity": "0.2"
    },
    "range": 1,
    "type": "x",
    "xaxis": {
      "min": "new Date(\u002705 Apr 2023\u0027).getTime()",
      "max": "new Date(\u002708 Apr 2023\u0027).getTime()"
    }
  },
  "toolbar": {
    "autoSelected": "selection",
    "show": false
  },
  "type": "area"
}

I can't figure out how to set the min and max selection so that when i open my view, the range is already selected like in this example :
https://apexcharts.com/javascript-chart-demos/line-charts/brush-chart/

Edit :
I found the solution which was to activate the mounted event and set a script that would write min and max date on the Mounted Event on the chart.

1 Like
2

Hi I'm having the same issue and trying to write to the min and max of the chart on the Mounted event however I'm unable to get the selection to work correctly. Would you mind elaborating on how you scripted it to the mount event?

3

Hi there,
Here is the script is used in the mountedHandler Script :

self.props.options.chart.selection.xaxis.min=system.date.toMillis(system.date.getDate(2023, 7, 1))
self.props.options.chart.selection.xaxis.max=system.date.toMillis(system.date.getDate(2023, 7, 8))

You could use the dates you want to be selected by default

1 Like
4

This worked thank you so much. I was missing the conversion to milliseconds.

1 Like