apexcharts.js

apexcharts.js copied to clipboard

https://codepen.io/vsync/pen/XvMPGq

When using horizontal bar chart, with data set such as [10,20,100], the xaxis last label (and tick) are missing. Expected to show the value 100 in the right-most side:

Options:

{
  chart: {
    height: 380,
    width: "100%",
    type: "bar"
  },
  plotOptions: {
      bar: {
          barHeight: '100%',
          horizontal: true   // ← "true" flip the axis, "100" is not shown anymore
      }
  },
  series: [
    {
      name: "Series 1",
      data: [10,20,100]
    }
  ]
}

When horizontal set to false and the axis flip, the max value is shown as expected & at the current position (although now on the Y axis)

I'm wonder this as well but using React instead. Hoping for someone to shed some light on this! :)

I've noticed that too

I have the same problem

The last x-axis label is intentionally hidden to avoid overflowing in some cases. But, I think, in horizontal bar charts, this should be avoided.

I will change this behavior for horizontal bar charts.

How can I hide the max and show the min label in horizontal bar charts?

Is there any way to change this in timeline chart? @junedchhipa

Will there be a future solution where the final x-axis value is not hidden but also not cut off? (I'm specifically concerned with area charts). @junedchhipa

What should be done to show last label in Line Chart Dual Axis? @junedchhipa

I see this remains unresolved

The last x-axis label is intentionally hidden to avoid overflowing in some cases. But, I think, in horizontal bar charts, this should be avoided.

I will change this behavior for horizontal bar charts.

-Hi @junedchhipa ,

Is there any configuration available where I can show the last label on x-axis.

@junedchhipa

5 years gone, but why you can't solve it?

I fixed this with th following prop: labels: { rotateAlways: true, }

if you don't want rotate the value from xaxis, set the prop rotate to -1 but you will have to fix the layout

Closing this as this no longer seems to an issue. I tested in v3.51.0 Please provide a new Codepen, and I will re-open this if the issue still persists.

in version 4.5.0 is the problem again

my solution is to turn date labels by 45°:

labels: {
        formatter: (val) => momentTz.tz(new Date(val), currentUser.timeZone).format(props.xLabelFormat)
        rotateAlways: true,
        rotate: -45,
        offsetY: 5,
        offsetX: -5
}