diff --git a/docs/visualize/area.asciidoc b/docs/visualize/area.asciidoc
index 907a7aa2c062..a0124c67e4cd 100644
--- a/docs/visualize/area.asciidoc
+++ b/docs/visualize/area.asciidoc
@@ -61,7 +61,7 @@ _silhouette_:: Displays each aggregation as variance from a central line.
Checkboxes are available to enable and disable the following behaviors:
-*Smooth Lines*:: Check this box to curve the top boundary of the area from point to point.
+*Line Mode*:: You can choose between straight line, smoothed line and stepped line.
*Set Y-Axis Extents*:: Check this box and enter values in the *y-max* and *y-min* fields to set the Y axis to specific
values.
*Scale Y-Axis to Data Bounds*:: The default Y axis bounds are zero and the maximum value returned in the data. Check
diff --git a/docs/visualize/line.asciidoc b/docs/visualize/line.asciidoc
index dd5f05a5204f..490b6bcb95d5 100644
--- a/docs/visualize/line.asciidoc
+++ b/docs/visualize/line.asciidoc
@@ -38,8 +38,7 @@ regularize the display of data sets with variabilities that are themselves highl
the variability is itself variable over the domain being examined, is known as _heteroscedastic_ data. For example, if
a data set of height versus weight has a relatively narrow range of variability at the short end of height, but a wider
range at the taller end, the data set is heteroscedastic.
-*Smooth Lines*:: Check this box to curve the line from point to point. Bear in mind that smoothed lines necessarily
-affect the representation of your data and create a potential for ambiguity.
+*Line Mode*:: You can choose between straight line, smoothed line and stepped line.
*Show Connecting Lines*:: Check this box to draw lines between the points on the chart.
*Show Circles*:: Check this box to draw each data point on the chart as a small circle.
*Current time marker*:: For charts of time-series data, check this box to draw a red line on the current time.
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/area.js b/src/core_plugins/kbn_vislib_vis_types/public/area.js
index 8f3e37ce94b6..15db616bf203 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/area.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/area.js
@@ -19,7 +19,6 @@ export default function HistogramVisType(Private) {
addTooltip: true,
addLegend: true,
legendPosition: 'right',
- smoothLines: false,
scale: 'linear',
interpolate: 'linear',
mode: 'stacked',
@@ -41,6 +40,16 @@ export default function HistogramVisType(Private) {
value: 'bottom',
text: 'bottom',
}],
+ interpolationModes: [{
+ value: 'linear',
+ text: 'straight',
+ }, {
+ value: 'cardinal',
+ text: 'smoothed',
+ }, {
+ value: 'step-after',
+ text: 'stepped',
+ }],
scales: ['linear', 'log', 'square root'],
modes: ['stacked', 'overlap', 'percentage', 'wiggle', 'silhouette'],
editor: areaTemplate
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.html
index ce8b59410c29..1927727a4a42 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.html
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.html
@@ -1,7 +1,11 @@