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

Series.highlight.line

configuration

The line of the highlighted chart series. The color is computed automatically from the base point color.

The line option is supported when series.type is set to "candlestick" or "ohlc".

series.highlight.line

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
      type: "ohlc",
      data: [
        { open: 1, high: 3, low: 0, close: 1 },
        { open: 2, high: 4, low: 1, close: 1.5 },
      ],
      highlight: {
        line: {
          width: 5,
          color: "green"
        }
      }
  }]
});
</script>

series.highlight.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: "ohlc",
      data: [
        { open: 1, high: 3, low: 0, close: 1 },
        { open: 2, high: 4, low: 1, close: 1.5 },
      ],
      highlight: {
        line: {
          color: "green"
        }
      }
  }]
});
</script>

series.highlight.line.dashType

String

The dash type of the highlight line.

The following dash types are supported:

"dash" - a line consisting of dashes
"dashDot" - a line consisting of a repeating pattern of dash-dot
"dot" - a line consisting of dots
"longDash" - a line consisting of a repeating pattern of long-dash
"longDashDot" - a line consisting of a repeating pattern of long-dash-dot
"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
"solid" - a solid line

Default: "solid"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    data: [1, 2, 3, 4],
    highlight: {
      line: {
        dashType: "dashDot",
        color: "red",
        width: 3
      }
    }
  }]
});
</script>

series.highlight.line.opacity

Number

The opacity of the line. By default the border is opaque.

Default: 1

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
      type: "ohlc",
      data: [
        { open: 1, high: 3, low: 0, close: 1 },
        { open: 2, high: 4, low: 1, close: 1.5 },
      ],
      highlight: {
        line: {
          opacity: 0.5,
          width: 10
        }
      }
  }]
});
</script>

series.highlight.line.width

Number

The width of the line.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
      type: "ohlc",
      data: [
        { open: 1, high: 3, low: 0, close: 1 },
        { open: 2, high: 4, low: 1, close: 1.5 },
      ],
      highlight: {
        line: {
          width: 5
        }
      }
  }]
});
</script>