<commit_before># XYPlot

XYPlot allows you to make line charts, area charts, scatterplots, heat maps, etc with animations and different interactions between them.

Currently following components are used for this purpose:

* [XYPlot](#xyplot) to wrap all the items.
* [Grids](#grids) to show vertical and horizontal grids.
* [Axes](#axes) to show X and Y axis.
* [Different kinds of series](#series) for line/area/bar charts, scatterplots, heat maps, etc.
* [Hints](#hints) to show the selected hints.
* [Crosshair](#crosshair) for crosshairs.

## Usage

Import the necessary components from the library&hellip;

```jsx
import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
```

&hellip; and add the following code to your `render` function:

```jsx
<XYPlot
  width={300}
  height={300}>
  <HorizontalGridLines />
  <LineSeries
    color="red"
    data={[
      {x: 1, y: 10},
      {x: 2, y: 5},
      {x: 3, y: 15}
    ]}/>
  <XAxis title="X" />
  <YAxis />
</XYPlot>
```

## Common concepts

XYPlot is a wrapper for series, hints, axes and other components. Most of these components do not require any properties by default, however it is expected that the user will pass the `data` property into each series.

`data` is an array of objects. Each item is some point on the chart. Object may contain following properties:

* `x`
* `y`
* `opacity` (optional)
* `fill` (optional)
* `stroke` (optional)
* `strokeWidth` (optional), `strokeStyle` (optional) - to control the width of the line series and whether they are dashed or solid. 
* `color` (optional, used instead of `fill` and `stroke` if none of them is passed)
* `size` (optional)

If the property is not passed in any of the objects, the property is not visualized. The user can override the way how properties are visualized by passing custom range, domain or type of scales to the series or the entire chart (please see [Series](#series) for more info).

Not all properties can be visualized in each series. Here's a short comparison of them:

|                  | `x` | `y` | `color` | `opacity` | `size` |
|------------------|-----|-----|---------|-----------|--------|
| `LineSeries`     |  +  |  +  | +       |           |        |
| `AreaSeries`     |  +  |  +  | +       |           |        |
| `LinemarkSeries` |  +  |  +  | +       |     +     | +      |
| `MarkSeries`     |  +  |  +  | +       |     +     | +      |
| `BarSeries`      |  +  |  +  | +       |     +     |        |
| `HeatmapSeries`  |  +  |  +  | +       |     +     |        |

## API Reference

### XYPlot

`XYPlot` is a component that wraps series, axis and grids, hints, etc and seamlessly provides necessary dimensions, sizes and scales into its children.  
`XYPlot` may or may not contain axes, grids, hints, crosshairs or series.

#### width
Type: `number`  
Width of the chart. The width should be passed.

#### height
Type: `number`  
Height of the component. The height should be passed.

#### margin (optional)
Type: `Object`  
Default: `{left: 40, right: 40, top: 10, bottom: 10}`
Margin around the chart.

#### stackBy (optional)
Type: `string`  
Stack the chart by the given attribute. If the attribute is `y`, the chart is stacked vertically; if the attribute is `x` then it's stacked horizontally.

```jsx
<XYPlot
  stackBy="y"
  width={300}
  height={300}>
  <LineSeries
    data={[
      {x: 1, y: 10},
      {x: 2, y: 5},
      {x: 3, y: 15}
    ]}/>
  <LineSeries
    data={[
      {x: 1, y: 12},
      {x: 2, y: 21},
      {x: 3, y: 2}
    ]}/>
</XYPlot>
```

#### onMouseLeave (optional)
Type: `function()`  
The function that is triggered each time the mouse leaves the component.

#### onMouseMove (optional)
Type: `function()`  
The function that is triggered each time mouse moves over at the component.

#### onMouseEnter (optional)
Type: `function()`  
The function that is triggered each time the mouse enters the component.

#### animation (optional)
Type: `{duration: number}|boolean`
Default: `false`  
Animation config, which is automatically passed to all children, but can be overrided for the each child.  
If `false` is passed, then the child components *will not be* animated.  
If `true` is passed then the child components *will be* animated with the default settings.  
If an object is passed, then the child components *will be* animated with the given settings.

### Grids

`VerticalGridLines` and `HorizontalGridLines` show a grid inside the chart. Here is a short example:

```jsx
<XYPlot
  width={300}
  height={300}>
  <VerticalGridLines />
  <HorizontalGridLines />
</XYPlot>
```

Currently both components have following properties:

#### values (optional)
Type: `Array(<string|number>)`  
Array of y (for `HorizontalGrid`) or x (for `VerticalGrid`) values to show the gridlines at.

#### animation (optional)
See the [XYPlot](#api-reference)'s `animation` section for more information.

### Axes

`XAxis` and `YAxis` shows are responsible for the axis in the chart. Both of them have following properties:

#### title (optional)
Type: `string`  
Shows the title for the axis.

#### labelFormat (optional)
Type: `string | function | null`  
Label format for a chart.

#### tickFormat (optional)
Type: `string | function | null`  
Format function for a chart.

#### tickSize (optional)
Type: `number`  
Default: `7`  
Tick size.

#### labelValues (optional)
Type: `Array | null`  
The list of values to be shown as labels.

#### tickValues (optional)
Type: `Array | null`  
The list of values to be shown as ticks.

#### animation (optional)
See the [XYPlot](#api-reference)'s `animation` section for more information.


### Series

The library supports several types of series:

* `LineSeries` for lines;
* `AreaSeries` for area charts;
* `MarkSeries` for scatterplots;
* `LineMarkSeries` is a shorthand to place marks (e.g. circles) on lines;
* `BarSeries` for column and bar charts;
* `HeatmapSeries` for heat maps.

Each series provides following API:

#### data
Type: `Array<Object>`
Array of data for the series.

#### x
Type: `number|Object`  
Exact X position of all series points in pixels or a series object.

#### y (optional)  
Type: `number|Object`  
Exact Y position of all series points in pixels or a series object.

#### color (optional)
Type: `string|Object`
Exact color for all series points or a series object.

#### size (optional)
Type: `number|Object`  
Exact size for all series points in pixels or a series object.

#### opacity (optional)
Type: `number|Object`  
Exact opacity for all series points in pixels or a series object.

#### onNearestX (optional)<commit_msg>Update xy-plot.md<commit_after># XYPlot

XYPlot allows you to make line charts, area charts, scatterplots, heat maps, etc with animations and different interactions between them.

Currently following components are used for this purpose:

* [XYPlot](#xyplot) to wrap all the items.
* [Grids](#grids) to show vertical and horizontal grids.
* [Axes](#axes) to show X and Y axis.
* [Different kinds of series](#series) for line/area/bar charts, scatterplots, heat maps, etc.
* [Hints](#hints) to show the selected hints.
* [Crosshair](#crosshair) for crosshairs.

## Usage

Import the necessary components from the library&hellip;

```jsx
import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
```

&hellip; and add the following code to your `render` function:

```jsx
<XYPlot
  width={300}
  height={300}>
  <HorizontalGridLines />
  <LineSeries
    color="red"
    data={[
      {x: 1, y: 10},
      {x: 2, y: 5},
      {x: 3, y: 15}
    ]}/>
  <XAxis title="X" />
  <YAxis />
</XYPlot>
```

## Common concepts

XYPlot is a wrapper for series, hints, axes and other components. Most of these components do not require any properties by default, however it is expected that the user will pass the `data` property into each series.

`data` is an array of objects. Each item is some point on the chart. Object may contain following properties:

* `x`
* `y`
* `opacity` (optional)
* `fill` (optional)
* `stroke` (optional)
* `strokeWidth` (optional), `strokeStyle` (optional) - to control the width of the line series and whether they are dashed or solid. 
* `color` (optional, used instead of `fill` and `stroke` if none of them is passed)
* `size` (optional)

If the property is not passed in any of the objects, the property is not visualized. The user can override the way how properties are visualized by passing custom range, domain or type of scales to the series or the entire chart (please see [Series](#series) for more info).

Not all properties can be visualized in each series. Here's a short comparison of them:

|                      | `x` | `y` | `color` | `opacity` | `size` |
|----------------------|-----|-----|---------|-----------|--------|
| `LineSeries`         |  +  |  +  | +       |           |        |
| `AreaSeries`         |  +  |  +  | +       |           |        |
| `LinemarkSeries`     |  +  |  +  | +       |     +     | +      |
| `MarkSeries`         |  +  |  +  | +       |     +     | +      |
| `VerticalBarSeries`  |  +  |  +  | +       |     +     |        |
| `HorizontalBarSeries`|  +  |  +  | +       |     +     |        |
| `HeatmapSeries`      |  +  |  +  | +       |     +     |        |

## API Reference

### XYPlot

`XYPlot` is a component that wraps series, axis and grids, hints, etc and seamlessly provides necessary dimensions, sizes and scales into its children.  
`XYPlot` may or may not contain axes, grids, hints, crosshairs or series.

#### width
Type: `number`  
Width of the chart. The width should be passed.

#### height
Type: `number`  
Height of the component. The height should be passed.

#### margin (optional)
Type: `Object`  
Default: `{left: 40, right: 40, top: 10, bottom: 10}`
Margin around the chart.

#### stackBy (optional)
Type: `string`  
Stack the chart by the given attribute. If the attribute is `y`, the chart is stacked vertically; if the attribute is `x` then it's stacked horizontally.

```jsx
<XYPlot
  stackBy="y"
  width={300}
  height={300}>
  <LineSeries
    data={[
      {x: 1, y: 10},
      {x: 2, y: 5},
      {x: 3, y: 15}
    ]}/>
  <LineSeries
    data={[
      {x: 1, y: 12},
      {x: 2, y: 21},
      {x: 3, y: 2}
    ]}/>
</XYPlot>
```

#### onMouseLeave (optional)
Type: `function()`  
The function that is triggered each time the mouse leaves the component.

#### onMouseMove (optional)
Type: `function()`  
The function that is triggered each time mouse moves over at the component.

#### onMouseEnter (optional)
Type: `function()`  
The function that is triggered each time the mouse enters the component.

#### animation (optional)
Type: `{duration: number}|boolean`
Default: `false`  
Animation config, which is automatically passed to all children, but can be overrided for the each child.  
If `false` is passed, then the child components *will not be* animated.  
If `true` is passed then the child components *will be* animated with the default settings.  
If an object is passed, then the child components *will be* animated with the given settings.

### Grids

`VerticalGridLines` and `HorizontalGridLines` show a grid inside the chart. Here is a short example:

```jsx
<XYPlot
  width={300}
  height={300}>
  <VerticalGridLines />
  <HorizontalGridLines />
</XYPlot>
```

Currently both components have following properties:

#### values (optional)
Type: `Array(<string|number>)`  
Array of y (for `HorizontalGrid`) or x (for `VerticalGrid`) values to show the gridlines at.

#### animation (optional)
See the [XYPlot](#api-reference)'s `animation` section for more information.

### Axes

`XAxis` and `YAxis` shows are responsible for the axis in the chart. Both of them have following properties:

#### title (optional)
Type: `string`  
Shows the title for the axis.

#### labelFormat (optional)
Type: `string | function | null`  
Label format for a chart.

#### tickFormat (optional)
Type: `string | function | null`  
Format function for a chart.

#### tickSize (optional)
Type: `number`  
Default: `7`  
Tick size.

#### labelValues (optional)
Type: `Array | null`  
The list of values to be shown as labels.

#### tickValues (optional)
Type: `Array | null`  
The list of values to be shown as ticks.

#### animation (optional)
See the [XYPlot](#api-reference)'s `animation` section for more information.


### Series

The library supports several types of series:

* `LineSeries` for lines;
* `AreaSeries` for area charts;
* `MarkSeries` for scatterplots;
* `LineMarkSeries` is a shorthand to place marks (e.g. circles) on lines;
* `VerticalBarSeries` for vertical bar charts;
* `HorizontalBarSeries` for horizontal bar charts;
* `HeatmapSeries` for heat maps.

Each series provides following API:

#### data
Type: `Array<Object>`
Array of data for the series.

#### x
Type: `number|Object`  
Exact X position of all series points in pixels or a series object.

#### y (optional)  
Type: `number|Object`  
Exact Y position of all series points in pixels or a series object.

#### color (optional)
Type: `string|Object`
Exact color for all series points or a series object.

#### size (optional)
Type: `number|Object`  
Exact size for all series points in pixels or a series object.

#### opacity (optional)
Type: `number|Object`  
Exact opacity for all series points in pixels or a series object.

#### onNearestX (optional)
{'fraction_non_alphanumeric': 0.12983033111592795, 'fraction_numerical': 0.007623888182973317, 'mean_word_length': 3.325897187196896, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 13, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '713730', 'n_tokens_mistral': 4226, 'n_tokens_neox': 3962, 'n_words': 1691}