series.line String|Object

The chart line configuration options.

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

Example - configure the chart line options

<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.

Example - set the chart line color

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

series.line.opacity Number (default: 1)

The line opacity. By default the line is opaque.

Example - set the chart line opacity

<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.width Number (default: 4)

The line width in pixels.

Example - set the chart line width

<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 (default: "normal")

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.

Example - set the chart line width

<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>