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',
    borderRadiusWhenStacked: 'all' | 'last',
    hideZeroBarsWhenGrouped: boolean,
    rangeBarOverlap: boolean,
    rangeBarGroupRows: boolean,
    isDumbbell: boolean,
    dumbbellColors: 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,
  candlestick: { ... },
    type: string,
    colors: { ... },
      upward: string | string[],
      downward: string | string[],
    wick: { ... },
      useFillColor: boolean,
  boxPlot: { ... },
    colors: { ... },
      upper: string | string[],
      lower: string | string[],
  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,
  funnel: { ... },
    shape: 'rectangle' | 'trapezoid',
    lastShape: 'flat' | 'taper',
  treemap: { ... },
    enableShades: boolean,
    shadeIntensity: number,
    distributed: boolean,
    reverseNegativeShade: boolean,
    useFillColorAsStroke: boolean,
    dataLabels: { ... },
      format: 'scale' | 'truncate',
    borderRadius: number,
    colorScale: { ... },
      inverse: boolean,
      ranges: Array,
        from: number,
        to: number,
        color: string,
        foreColor: string,
        name: string,
      min: number,
      max: number,
    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,
  pie: { ... },
    startAngle: number,
    endAngle: number,
    customScale: number,
    offsetX: number,
    offsetY: number,
    expandOnClick: boolean,
    dataLabels: { ... },
      offset: number,
      minAngleToShowLabel: 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[],
  radar: { ... },
    size: number,
    offsetX: number,
    offsetY: number,
    polygons: { ... },
      strokeColors: string | string[],
      strokeWidth: string | string[],
      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,
}