plotOptions

Configuration Structure

plotOptions: {
  line: { ... },
    isSlopeChart: boolean,
    colors: { ... },
      threshold: number,
      colorAboveThreshold: string,
      colorBelowThreshold: string,
  area: { ... },
    fillTo: 'origin' | 'end',
  bar: { ... },
    horizontal: boolean,
    columnWidth: string | number,
    barHeight: string | number,
    distributed: boolean,
    borderRadius: number,
    borderRadiusApplication: 'around' | 'end',
    hideZeroBarsWhenGrouped: boolean,
    rangeBarOverlap: boolean,
    rangeBarGroupRows: boolean,
    isDumbbell: boolean,
    dumbbellColors: string[][],
    dumbbell: ApexPlotOptionsDumbbell,
      connector: { ... },
        color: string,
        opacity: number,
      dataLabels: { ... },
        enabled: boolean,
        offset: number,
        colorFromMarker: boolean,
        formatter: Function,
        style: { ... },
          fontSize: string,
          fontFamily: string,
          fontWeight: string | number,
          colors: string[],
      tooltip: { ... },
        differenceLabel: string,
    isFunnel: boolean,
    isFunnel3d: boolean,
    colors: { ... },
      ranges: Array,
        from: number,
        to: number,
        color: string,
      backgroundBarColors: string[],
      backgroundBarOpacity: number,
      backgroundBarRadius: number,
    dataLabels: { ... },
      maxItems: number,
      hideOverflowingLabels: boolean,
      position: string,
      orientation: 'horizontal' | 'vertical',
      total: { ... },
        enabled: boolean,
        formatter: Function,
        offsetX: number,
        offsetY: number,
        style: { ... },
          color: string,
          fontSize: string,
          fontFamily: string,
          fontWeight: number | string,
  bubble: { ... },
    zScaling: boolean,
    minBubbleRadius: number,
    maxBubbleRadius: number,
    minZ: number,
    maxZ: number,
  scatter: { ... },
    jitter: { ... },
      enabled: boolean,
      x: number,
      y: number,
      distributed: boolean,
      maxPoints: number,
  candlestick: { ... },
    type: string,
    colors: { ... },
      upward: string | string[],
      downward: string | string[],
    wick: { ... },
      useFillColor: boolean,
  boxPlot: { ... },
    colors: { ... },
      upper: string | string[],
      lower: string | string[],
    whiskers: 'minmax' | 'tukey',
    points: { ... },
      show: boolean,
      shape: 'circle' | 'square',
      size: number,
      jitter: number,
      maxPoints: number,
      opacity: number,
      fillColor: string,
      strokeColor: string,
      strokeWidth: number,
      colorScale: { ... },
        colors: string[],
        min: number,
        max: number,
        steps: number,
  violin: { ... },
    bandwidthScale: number,
    kde: { ... },
      bandwidth: number,
      resolution: number,
    normalize: 'individual' | 'group',
    side: 'both' | 'left' | ...,
    box: { ... },
      show: boolean,
      width: string | number,
      whiskers: 'minmax' | 'tukey',
      strokeWidth: number,
      fillColor: string,
      capWidth: number,
    points: { ... },
      show: boolean,
      shape: 'circle' | 'square',
      size: number,
      jitter: number,
      constrainToViolin: boolean,
      position: 'center' | 'left' | ...,
      laneWidth: string | number,
      maxPoints: number,
      opacity: number,
      fillColor: string,
      strokeColor: string,
      strokeWidth: number,
      colorScale: { ... },
        colors: string[],
        min: number,
        max: number,
        steps: number,
  histogram: { ... },
    bins: 'auto' | 'fd' | ...,
    binWidth: number,
    range: number[],
    normalize: 'count' | 'relative' | ...,
    cumulative: boolean,
    overlap: boolean,
  heatmap: { ... },
    radius: number,
    enableShades: boolean,
    shadeIntensity: number,
    reverseNegativeShade: boolean,
    distributed: boolean,
    useFillColorAsStroke: boolean,
    colorScale: { ... },
      ranges: Array,
        from: number,
        to: number,
        color: string,
        foreColor: string,
        name: string,
      inverse: boolean,
      min: number,
      max: number,
      gradientLegend: ApexGradientLegend,
        enabled: boolean,
        width: number | string,
        height: number | string,
        thickness: number,
        align: 'start' | 'center' | 'end',
        stops: number,
        showLabels: boolean,
        showHoverValue: boolean,
        labelStyle: { ... },
          fontSize: string,
          fontFamily: string,
          colors: string,
        arrow: { ... },
          size: number,
          color: string,
        formatter: Function,
  waterfall: { ... },
    colors: { ... },
      positive: string,
      negative: string,
      subtotal: string,
      total: string,
    connectors: { ... },
      show: boolean,
      color: string,
      strokeWidth: number,
      strokeDashArray: number,
  streamgraph: { ... },
    offset: 'wiggle' | 'silhouette' | ...,
    order: 'inside-out' | 'inverse' | ...,
    hover: { ... },
      show: boolean,
      opacity: number,
    labels: { ... },
      show: boolean,
      minWidth: number,
      minFontSize: number,
      maxFontSize: number,
      style: { ... },
        fontSize: string,
        fontFamily: string,
        fontWeight: string | number,
        colors: string[],
  funnel: { ... },
    shape: 'rectangle' | 'trapezoid',
    lastShape: 'flat' | 'taper',
  treemap: { ... },
    enableShades: boolean,
    shadeIntensity: number,
    distributed: boolean,
    reverseNegativeShade: boolean,
    useFillColorAsStroke: boolean,
    dataLabels: { ... },
      format: 'scale' | 'truncate',
      minFontSize: number,
    borderRadius: number,
    colorScale: { ... },
      inverse: boolean,
      ranges: Array,
        from: number,
        to: number,
        color: string,
        foreColor: string,
        name: string,
      min: number,
      max: number,
      colorValue: string | ((datum: any, opts: object) => number),
      gradient: { ... },
        enabled: boolean,
        min: number,
        max: number,
        midpoint: number | null,
        symmetric: boolean,
        colors: string[],
        stops: Array,
          value: number,
          color: string,
      gradientLegend: ApexGradientLegend,
        enabled: boolean,
        width: number | string,
        height: number | string,
        thickness: number,
        align: 'start' | 'center' | 'end',
        stops: number,
        showLabels: boolean,
        showHoverValue: boolean,
        labelStyle: { ... },
          fontSize: string,
          fontFamily: string,
          colors: string,
        arrow: { ... },
          size: number,
          color: string,
        formatter: Function,
    nested: { ... },
      enabled: boolean,
      drilldownAsLevels: boolean,
    parents: { ... },
      padding: number,
      fill: string,
      fillOpacity: number,
      borderColor: string,
      borderWidth: number,
      borderRadius: number,
      hover: { ... },
        show: boolean,
        color: string,
        width: number,
      header: { ... },
        show: boolean,
        height: number,
        minWidth: number,
        align: 'left' | 'center' | 'right',
        offsetX: number,
        offsetY: number,
        showValue: boolean,
        formatter: Function,
        style: { ... },
          fontSize: string,
          fontFamily: string,
          fontWeight: number | string,
          color: string,
          background: string,
          cssClass: string,
      show: boolean | 'auto',
      tooltip: { ... },
        formatter: Function,
    levels: ApexTreemapLevel[],
      padding: number,
      fill: string,
      fillOpacity: number,
      borderColor: string,
      borderWidth: number,
      borderRadius: number,
      hover: { ... },
        show: boolean,
        color: string,
        width: number,
      header: { ... },
        show: boolean,
        height: number,
        minWidth: number,
        align: 'left' | 'center' | 'right',
        offsetX: number,
        offsetY: number,
        showValue: boolean,
        formatter: Function,
        style: { ... },
          fontSize: string,
          fontFamily: string,
          fontWeight: number | string,
          color: string,
          background: string,
          cssClass: string,
    zoom: { ... },
      enabled: boolean,
      breadcrumb: ApexBreadcrumb,
        show: boolean,
        position: 'top-left' | 'top-right',
        separator: string,
        rootLabel: string,
        offsetX: number,
        offsetY: number,
        formatter: Function,
    seriesTitle: { ... },
      show: boolean,
      offsetY: number,
      offsetX: number,
      borderColor: string,
      borderWidth: number,
      borderRadius: number,
      style: { ... },
        background: string,
        color: string,
        fontSize: string,
        fontFamily: string,
        fontWeight: number | string,
        cssClass: string,
        padding: { ... },
          left: number,
          right: number,
          top: number,
          bottom: number,
  unit: { ... },
    layout: 'grouped' | 'packed' | ...,
    positions: string | ApexUnitLayout,
    transition: 'group' | 'flow' | 'identity',
    shape: 'circle' | 'square' | ...,
    pictogram: { ... },
      mark: Array,
      fit: 'contain' | 'width' | 'height',
      scale: number,
      padding: number,
      fallback: 'circle' | 'square',
    image: { ... },
      src: string,
      width: number,
      height: number,
      tint: boolean,
    size: number | 'auto',
    columns: { ... },
      size: 'inherit' | 'auto' | number,
    grid: { ... },
      columns: number,
      total: number,
      fillFrom: 'bottom' | 'top',
      split: boolean,
      tileColumns: number,
      max: number,
      trackColor: string,
    scatter: { ... },
      y: 'lanes' | 'value',
      spread: 'swarm' | 'jitter',
      orientation: 'horizontal' | 'vertical',
      tickAmount: number,
      xMin: number,
      xMax: number,
      xTitle: string,
      xFormatter: Function,
      yTickAmount: number,
      yMin: number,
      yMax: number,
      yTitle: string,
      yFormatter: Function,
      sizeField: string,
      sizeRange: [number, number],
      laneLabelWidth: number,
      gridlines: boolean,
    sizeByValue: { ... },
      enabled: boolean,
      maxRadius: number | 'auto',
      minRadius: number,
      scale: 'area' | 'linear',
    spacing: number,
    gather: { ... },
      motion: 'auto' | 'spring' | 'tween',
      spring: 'crisp' | 'gentle' | 'snappy',
      easing: 'outCubic' | 'inOutCubic' | ...,
      overshoot: number,
      enter: 'burst' | 'fade' | 'rise',
    arc: { ... },
      startAngle: number,
      endAngle: number,
      innerRadiusRatio: number,
      rows: number | 'auto',
    borderRadius: number,
    unitValue: number,
    maxUnits: number,
    sortByGroup: boolean,
    clusterLabels: { ... },
      show: boolean,
      position: 'top' | 'bottom',
      curved: boolean,
      fontSize: string,
      fontFamily: string,
      fontWeight: number | string,
      color: string,
      offsetY: number,
      formatter: Function,
      external: { ... },
        show: boolean,
        connector: { ... },
          show: boolean,
          width: number,
          color: string,
          gap: number,
          length: number,
        offsetX: number,
        offsetY: number,
    tooltip: { ... },
      formatter: Function,
  pie: { ... },
    startAngle: number,
    endAngle: number,
    customScale: number,
    offsetX: number,
    offsetY: number,
    expandOnClick: boolean,
    expandOffset: number,
    hoverOutline: { ... },
      show: boolean,
      size: number,
      gap: number,
      opacity: number,
      color: string,
    borderRadius: number,
    spacing: number,
    dataLabels: { ... },
      offset: number,
      minAngleToShowLabel: number,
      external: { ... },
        show: boolean,
        offsetX: number,
        offsetY: number,
        fontSize: string,
        fontFamily: string,
        fontWeight: string | number,
        color: string,
        formatter: Function,
        connector: { ... },
          show: boolean,
          width: number,
          color: string,
          length: number,
          gap: number,
    donut: { ... },
      size: string,
      background: string,
      labels: { ... },
        show: boolean,
        name: { ... },
          show: boolean,
          fontSize: string,
          fontFamily: string,
          fontWeight: string | number,
          color: string,
          offsetY: number,
          formatter: Function,
        value: { ... },
          show: boolean,
          fontSize: string,
          fontFamily: string,
          fontWeight: string | number,
          color: string,
          offsetY: number,
          formatter: Function,
        total: { ... },
          show: boolean,
          showAlways: boolean,
          fontFamily: string,
          fontWeight: string | number,
          fontSize: string,
          label: string,
          color: string,
          formatter: Function,
  polarArea: { ... },
    rings: { ... },
      strokeWidth: number,
      strokeColor: string,
    spokes: { ... },
      strokeWidth: number,
      connectorColors: string | string[],
  sunburst: { ... },
    offsetX: number,
    offsetY: number,
    startAngle: number,
    endAngle: number,
    innerSize: string,
    borderRadius: number,
    spacing: number,
    leaf: 'extend' | 'stop',
    partition: 'normalize' | 'strict',
    tint: number,
    zoomOnClick: boolean,
    dataLabels: { ... },
      show: boolean,
      minAngleToShow: number,
      style: { ... },
        fontSize: string,
        fontFamily: string,
        fontWeight: string | number,
        colors: string[],
  radar: { ... },
    size: number,
    offsetX: number,
    offsetY: number,
    polygons: { ... },
      strokeColors: string | string[],
      strokeWidth: Array,
      connectorColors: string | string[],
      fill: { ... },
        colors: string[],
  radialBar: { ... },
    inverseOrder: boolean,
    startAngle: number,
    endAngle: number,
    offsetX: number,
    offsetY: number,
    shape: 'arc' | 'needle',
    min: number,
    max: number,
    bands: Array,
    bandsStyle: { ... },
      strokeWidth: string,
      gap: number,
      hideTrackWhenPresent: boolean,
      linecap: 'butt' | 'round' | 'square',
    ticks: { ... },
      show: boolean,
      major: { ... },
        count: number,
        length: number,
        width: number,
        color: string,
        placement: 'inside' | 'outside',
      minor: { ... },
        count: number,
        length: number,
        width: number,
        color: string,
        placement: 'inside' | 'outside',
      labels: { ... },
        show: boolean,
        offset: number,
        fontSize: string,
        fontFamily: string,
        fontWeight: string | number,
        color: string,
        formatter: Function,
    needle: { ... },
      color: string,
      length: string | number,
      baseWidth: number,
      tipWidth: number,
      showValueArc: boolean,
      offsetY: number,
      animation: { ... },
        enabled: boolean,
        duration: number,
        easing: string,
    hollow: { ... },
      margin: number,
      size: string,
      background: string,
      image: string,
      imageWidth: number,
      imageHeight: number,
      imageOffsetX: number,
      imageOffsetY: number,
      imageClipped: boolean,
      position: 'front' | 'back',
      stroke: string,
      strokeWidth: number,
      strokeDasharray: string | number,
      dropShadow: ApexDropShadow,
        enabled: boolean,
        top: number,
        left: number,
        blur: number,
        opacity: number,
        color: string | string[],
    track: { ... },
      show: boolean,
      startAngle: number,
      endAngle: number,
      background: string | string[],
      strokeWidth: string,
      opacity: number,
      margin: number,
      dropShadow: ApexDropShadow,
        enabled: boolean,
        top: number,
        left: number,
        blur: number,
        opacity: number,
        color: string | string[],
    dataLabels: { ... },
      show: boolean,
      name: { ... },
        show: boolean,
        fontFamily: string,
        fontWeight: string | number,
        fontSize: string,
        color: string,
        offsetY: number,
        formatter: Function,
      value: { ... },
        show: boolean,
        fontFamily: string,
        fontSize: string,
        fontWeight: string | number,
        color: string,
        offsetY: number,
        formatter: Function,
      total: { ... },
        show: boolean,
        label: string,
        color: string,
        fontFamily: string,
        fontWeight: string | number,
        fontSize: string,
        formatter: Function,
    barLabels: { ... },
      enabled: boolean,
      offsetX: number,
      offsetY: number,
      useSeriesColors: boolean,
      fontFamily: string,
      fontWeight: string | number,
      fontSize: string,
      formatter: Function,
      onClick: Function,
}