Rotate a MUI LinearProgress

Issue

I'm trying to make a graph chart with MUI using the LinearProgress component with some styling the basic idea is to get this to rotate 90deg

const BorderLinearProgressBottom = withStyles((theme) => ({
  root: {
    height: 50,
    borderRadius: 5,
  },
  colorPrimary: {
    backgroundColor:
      theme.palette.grey[theme.palette.type === "light" ? 200 : 700],
  },
  bar: {
    borderRadius: 5,
    backgroundColor: "#00A99E",
  },
  transform: [{ rotate: "90deg" }],
}))(LinearProgress);

gets my

 <BorderLinearProgressBottom
     variant="determinate"
     value={22}
     />

to look like this

How can I get it to rotate by 90deg?

I tried putting in the BorderLinearProgressBottom transform: [{ rotate: "90deg" }], but that did not work.

Code Sandbox

Solution

Please don't use rotate(-90deg) if you want to display the LinearProgress vertically, it will break your layout because transform only scales the element visually without changing the size, so a rotated LinearProgress still occupies the space as if it's laid out horizontally. To rotate both its appearance and size, you should have a look at the implementation of Slider for reference. But I'll write it down for you now to save time.

First off you need to swap the height and width of the ProgressBar container:

// before
height: 50, // restrict the height
width: 'auto', // expand as long as you want (inside container)

// after
width: 50, // restrict the width
height: '100%', // expand as high as you want (inside container)

Then rotate the progress bar inside. This transform works because it only transforms 'locally' (the bar position is absolute inside the container).

bar: {
  // the default style uses translateX, so we need to switch the axis
  transform: ({ value }) => {
    return `translateY(${value}%) !important`;
  }
}

And that's it. You're done. Not it will look like a vertical Slider.

Live Demo

Answered By - NearHuscarl