New to Kendo UI for jQuery? Start a free 30-day trial

Series.line

configuration

The chart line configuration options.

The line option is supported when the series.type option is set to "area", "candlestick", "ohlc" or "waterfall".

series.line

String|Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    type: "area",
    line: {
      color: "green",
      width: 5
    },
    data: [1, 2, 3]
  }]
});
</script>

series.line.color

String

The line color. Accepts a valid CSS color string, including hex and rgb.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    type: "area",
    line: {
      color: "green",
      width: 5
    },
    data: [1, 2, 3]
  }]
});
</script>

series.line.opacity

Number

The line opacity. By default the line is opaque.

Default: 1

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    type: "area",
    line: {
      color: "green",
      opacity: 0.5,
      width: 5
    },
    data: [1, 2, 3]
  }]
});
</script>

series.line.style

String

The supported values are:

"normal" - The values will be connected with straight line.
"step" - The values will be connected with a line with right angle.
"smooth" - The values will be connected with a smooth line.

The default value is "normal".

The style option is supported when series.type is set to "area", "rangeArea", "polarArea" or "radarArea".

The step value is supported only when series.type is set to "area" or "rangeArea".

For line series, use series.style.

Default: "normal"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "area",
    line: {
      color: "green",
      opacity: 0.5,
      width: 5,
      style: "step"
    },
    data: [1, 2, 3]
  }]
});
</script>

series.line.width

Number

The line width in pixels.

Default: 4

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "area",
    line: {
      color: "green",
      opacity: 0.5,
      width: 5
    },
    data: [1, 2, 3]
  }]
});
</script>