[[xy-chart]]
== Line, Area, and Bar charts
Line, Area, and Bar charts allow you to plot your data on X/Y axis.

First you need to select your _metrics_ which define Value axis.

include::y-axis-aggs.asciidoc[]

The _buckets_ aggregations determine what information is being retrieved from your data set.

Before you choose a buckets aggregation, specify if you are splitting slices within a single chart or splitting into
multiple charts. A multiple chart split must run before any other aggregations. When you split a chart, you can change
if the splits are displayed in a row or a column by clicking the *Rows | Columns* selector.

include::x-axis-aggs.asciidoc[]

include::color-picker.asciidoc[]

Enter a string in the *Custom Label* field to change the display label.

You can click the *Advanced* link to display more customization options for your metrics or bucket aggregation:

*Exclude Pattern*:: Specify a pattern in this field to exclude from the results.
*Include Pattern*:: Specify a pattern in this field to include in the results.
*JSON Input*:: A text field where you can add specific JSON-formatted properties to merge with the aggregation
definition, as in the following example:

[source,shell]
{ "script" : "doc['grade'].value * 1.2" }

NOTE: In Elasticsearch releases 1.4.3 and later, this functionality requires you to enable
{ref}/modules-scripting.html[dynamic Groovy scripting].

The availability of these options varies depending on the aggregation you choose.

=== Metrics & Axes

Select the *Metrics & Axes* tab to change the way each individual metric is shown on the chart.
The data series are styled in the _Metrics_ section, while the axes are styled in the X and Y axis sections.

==== Metrics
Modify how each metric from the Data panel is visualized on the chart.

*Chart type*:: Choose between *Area*, *Line*, and *Bar* types.
*Mode*:: stack the different metrics, or plot them next to each other
*Value Axis*:: choose the axis you want to plot this data too (the properties of each are configured under Y-axes).
*Line mode*:: should the outline of lines or bars appear *smooth*, *straight*, or *stepped*.

==== Y-axis

Style all the Y-axes of the chart.

*Position*:: position of the Y-axis (*left* or *right* for vertical charts, and *top* or *bottom* for horizontal charts).
*Scale type*:: scaling of the values (*linear*, *log*, or *square root*)
*Advanced Options*::
*Labels - Show Labels*:::: Allows you to hide axis labels
*Labels - Filter Labels*:::: If filter labels is enabled some labels will be hidden in case there is not enough space to display them
*Labels - Rotate*:::: You can enter the number in degrees for how much you want to rotate labels
*Labels - Truncate*:::: You can enter the size in pixels to which the label is truncated
*Scale to Data Bounds*:::: The default Y-axis bounds are zero and the maximum value returned in the data. Check
                           this box to change both upper and lower bounds to match the values returned in the data.
*Custom Extents*:::: You can define custom minimum and maximum for each axis

==== X-Axis

*Position*:: position of the X-Axis (*left* or *right* for horizontal charts, and *top* or *bottom* for vertical charts).
*Advanced Options*::
*Labels - Show Labels*:::: Allows you to hide axis labels
*Labels - Filter Labels*:::: If filter labels is enabled some labels will be hidden in case there is not enough spave to display them
*Labels - Rotate*:::: You can enter the number in degrees for how much you want to rotate labels
*Labels - Truncate*:::: You can enter the size in pixels to which the label is truncated


=== Panel Settings

These are options that apply to the entire chart and not just the individual data series.

==== Common options
*Legend Position*:: Move your legend to the *left*, *right*, *top* or *bottom*
*Show Tooltip*:: Enables or disables the display of tooltip on hovering over chart objects
*Current Time Marker*:: Show a line indicating the current time

==== Grid options
You can enable grid on the chart. By default grid is displayed on the category axis only.

*X-axis*:: You can disable the display of grid lines on category axis
*Y-axis*:: You can choose on which (if any) of the value axes you want to display grid lines