Skip to content

Problem with OffsetY in y-axis when i use a horizontal bar chart #3336

@oswmoena

Description

@oswmoena

Description

[REACT][TYPESCRIPT]
Hi ! i have a problem when i want to put a offsetY in y-axis, with this options:

const options: ApexOptions = {
    chart: {
      type:"bar",
      height: 440,
      stacked: true,
    },
    colors: ["#99BC37", "#4E824D"],
    plotOptions: {
      bar: {
        horizontal: true,
        barHeight: "60%",
      },
    },
    legend: {
      position: "top",
      fontSize: "14px",
      fontFamily: "Helvetica, Arial",
      fontWeight: 900,
      itemMargin: {
        horizontal: 100,
        vertical: 0,
      },
      markers: {
        radius: 12,
      },
    },
    stroke: {
      show: false,
    },
    xaxis: {
      categories: ["CERC", "CGC2"],
      labels: {
        formatter: function (val: any) {
          return Math.abs(Math.round(val)).toString();
        },
      },
    },
    tooltip: {
      enabled: false,
    },
    dataLabels: {
      formatter: function (val: any) {
        return val > 0 ? val : val * -1;
      },
      style: {
        fontSize: "15px",
        colors: ["#fff"],
      },
    },
    title: {
      text: 'Product',
      align: 'center',
      floating: true,
      style: {
        fontSize: '18px',
      },
    },
    grid: {
      xaxis: {
        lines: {
          show: true,
        },
      },
      yaxis: {
        lines: {
          show: false,
        },
      },
    },
    yaxis:
    {
      title: {
        text: "title",
        rotate: 0,
        offsetY: -180,
        offsetX:0,
      },
    }
  };

  const series = [
    {
      name: "Sheets",
      data: [30, 50],
    },
    {
      name: "Reels",
      data: [-75, -42],
    },
  ];

Steps to Reproduce

  1. build a chart with options
  2. make sure to be a bar chart and the horizontal is true
  3. try to add a offsetY in yaxis title

Expected Behavior

the title can moving to bottom or top, depends the number

Actual Behavior

it not respond (keep title center)

Screenshots

when horizontal is true
image

when horizontal is false
image

Same options (except horizontal, obviously).

Reproduction Link

https://codesandbox.io/s/react-basic-example-forked-gyt8mv?file=/src/App.js

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingverified

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions