uber/react-vis

Rotated axes ticks are cut off

tomitrescak opened this issue · 1 comments

tomitrescak commented

Hi, I have rotated by ticks by 90degrees, but I am getting the labels cutoff

image

I tried setting width or height to no avail

<Pane>
      <Heading>Employability Perspective</Heading>
      <XYPlot height={400} width={2000} xType="ordinal">
        <VerticalGridLines />
        <HorizontalGridLines />

        <VerticalBarSeries
          data={jobs.map((j, i) => ({ x: j.name, y: 50 }))}
          barWidth={0.7}
          height={200}
        />

        <XAxis tickLabelAngle={-90} height={200} />
        <YAxis />
      </XYPlot>
    </Pane>
tomitrescak commented

For those with the same issue, the trick was to set the margin on XYPlot margin={{top: 200 }}

  • 🎉2