React-vis: Tick Labels are cut off

[kbouaazzi-ds]

Hello,
I can't seem to get the labels on these axes to show up properly. Here is my code:

```import React from 'react'
import { XYPlot, PolygonSeries, MarkSeries, XAxis, YAxis, VerticalGridLines, HorizontalGridLines } from 'react-vis';

const data = [{ x: 10000, y: 20000}, { x: 12000, y: 10000},
{ x: 17000, y: 30000}, { x: 14000, y: 25000},
{ x: 15000, y: 20000}, { x: 11000, y: 28000}]

const lowBandData = [
{x: 0, y: 20000},
{x: 0, y: 30000},
{x: 20000, y: 20000},
{x: 20000, y: 10000}
]

export class ReactVisExample extends React.Component {
render() {
return (
width={500}
height={500}>




data={lowBandData}
color="gray"/>
data={data}
color="green">


);
}
}
```

As you can see, the labels on the y axis and the last label on the x axis are cutoff. Is there a work-around/some hidden param I can pass to make these show up properly?

[mcnuttandrew]

Hey @kbouaazzi-ds,

There's a couple of different ways that you could approach this problem! You could first try out adding a margin:

<XYPlot
  margin={{left: 100}}
  width={300}
  height={300}>
  <XAxis/>
  <YAxis/>
  <HorizontalGridLines/>
  <VerticalGridLines/>
  <PolygonSeries
    data={lowBandData}
    color="#776E57"/>
  <MarkSeries
    data={data}
    color="#4DC19C" />
</XYPlot>

Which would adjust the way that XYPlot is laying out the components:

Or you could modify the actual values being shown (if you like the default margin), and use a numerical formatter, such as d3-format or numeral and pipe that into the Axis formatter:

<XYPlot
  width={300}
  height={300}>
  <XAxis />
  <YAxis tickFormat={tick => format('.2s')(tick)}/>
  <HorizontalGridLines/>
  <VerticalGridLines/>
  <PolygonSeries
    data={lowBandData}
    color="#776E57"/>
  <MarkSeries
    data={data}
    color="#4DC19C" />
</XYPlot>

Here i am using d3-format. This yields

[kbouaazzi-ds]

Oh thanks. I didn't realize I could pass margin in at the graph level. Thanks @mcnuttandrew!

[shrishail091]

You can also manage the number of the tick to be displayed using tickTotal attribute.

Example: tickTotal = 5 will limit the number of ticks to 5.