series.highlight Object

The chart series highlighting configuration options.

Example - configure the chart series highlighting

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
      type: "pie",
      data: [1, 2],
      highlight: {
        border: {
          opacity: 1,
          width: 5,
          color: "black"
        }
      }
  }]
});
</script>

series.highlight.border Object

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

The border option is supported when series.type is set to "donut", "bubble", "pie", "candlestick" or "ohlc".

Example - set the chart highlight border

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
      type: "pie",
      data: [1, 2],
      highlight: {
        border: {
          width: 5,
          color: "black"
        }
      }
  }]
});
</script>

series.highlight.border.color String

The color of the border. Accepts a valid CSS color string, including hex and rgb.

Example - set the chart highlight border width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
      type: "pie",
      data: [1, 2],
      highlight: {
        border: {
          color: "red",
          width: 5
        }
      }
  }]
});
</script>

series.highlight.border.opacity Number (default: 1)

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

Example - set the chart highlight border opacity

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
      type: "pie",
      data: [1, 2],
      highlight: {
        border: {
          opacity: 0.5,
          width: 5
        }
      }
  }]
});
</script>

series.highlight.border.width Number (default: 0)

The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.

Example - set the chart highlight border width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
      type: "pie",
      data: [1, 2],
      highlight: {
        border: {
          width: 5
        }
      }
  }]
});
</script>

series.highlight.color String

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

The color option is supported when series.type is set to "donut" or "pie".

Example - set the chart highlight color

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

series.highlight.inactiveOpacity Number

The opacity of the series when another series is highlighted.

Example - set the chart highlight inactive opacity

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
      type: "donut",
      data: [1, 2],
      highlight: {
        inactiveOpacity: 0.2
      }
  }]
});
</script>

series.highlight.line Object

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

Example - set the highlight 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,
          color: "green"
        }
      }
  }]
});
</script>

series.highlight.line.dashType String (default: "solid")

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

series.highlight.line.color String

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

Example - set the highlight line color

<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.opacity Number (default: 1)

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

Example - set the highlight line opacity

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

Example - set the highlight line width

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

series.highlight.markers.border

The border of the highlighted markers.

    <div id="chart"></div>
    <script>
      $("#chart").kendoChart({
        series: [{
          type: "line",
          markers: {
            visible: true,
            type: "roundedRect",
          },
          highlight: {
            border: {
               color: 'blue',
               width: 10
            }
          },
          data: [1, 2, 3]
        }]
      });
    </script>

series.highlight.markers.border.color

The border color of the highlighted markers.

    <div id="chart"></div>
    <script>
      $("#chart").kendoChart({
        series: [{
          type: "line",
          markers: {
            visible: true,
            type: "roundedRect",
          },
          highlight: {
            border: {
               color: 'blue',
               width: 10
            }
          },
          data: [1, 2, 3]
        }]
      });
    </script>

series.highlight.markers.border.width

The border width of the highlighted markers.

    <div id="chart"></div>
    <script>
      $("#chart").kendoChart({
        series: [{
          type: "line",
          markers: {
            visible: true,
            type: "roundedRect",
          },
          highlight: {
            border: {
               color: 'blue',
               width: 10
            }
          },
          data: [1, 2, 3]
        }]
      });
    </script>

series.highlight.markers.color

The color of the highlighted marker.

    <div id="chart"></div>
    <script>
      $("#chart").kendoChart({
        series: [{
          type: "line",
          markers: {
            visible: true,
            type: "roundedRect",
          },
          highlight: {
            markers:{
              color: 'red'
            }
          },
          data: [1, 2, 3]
        }]
      });
    </script>

series.highlight.opacity Number

The opacity of the highlighted points.

The opacity option is supported when series.type is set to "bubble", "pie" or "donut".

Example - set the highlight opacity

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
      type: "pie",
      data: [1, 2],
      highlight: {
        opacity: 0.5
      }
  }]
});
</script>

series.highlight.toggle Function

A function that can be used to handle toggling the points highlight. The available argument fields are:

• preventDefault - a function that can be used to prevent showing the default highlight overlay.
• show - a boolean value indicating whether the highlight should be shown.
• visual - the visual element that should be highlighted.
• category - the point category.
• dataItem - the point dataItem.
• value - the point value.
• series - the point series.

Example - using custom highlight

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "pie",
      data: [1, 2],
      highlight: {
        toggle: function (e) {
          e.preventDefault();

          var opacity = e.show ? 0.5 : 1;
          e.visual.opacity(opacity);
        }
      }
    }]
  });
</script>

series.highlight.visible Boolean (default: true)

If set to true the chart will highlight the series when the user hovers it with the mouse. By default chart series highlighting is enabled.

Example - prevent the chart series highlighting

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
      type: "pie",
      data: [1, 2],
      highlight: {
        visible: false
      }
  }]
});
</script>

series.highlight.visual Function

A function that can be used to set custom visual for the point highlight.

The available argument fields are:

• createVisual - a function that can be used to get the default highlight visual.
• rect - the kendo.geometry.Rect that defines where the visual should be rendered.
• visual - the visual element that should be highlighted.
• options - the point options.
• category - the point category.
• dataItem - the point dataItem.
• value - the point value.
• sender - the chart instance.
• series - the point series.
• stackValue - the cumulative point value on the stack. Available only for stackable series.
• percentage - the point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.
• runningTotal - the sum of point values since the last "runningTotal" summary point. Available for waterfall series.
• total - the sum of all previous series values. Available for waterfall series.
• from - the "from" point highlight visual options. Available for "rangeArea" and "verticalRangeArea" series.
• to - the "to" point highlight visual options. Available for "rangeArea" and "verticalRangeArea" series.

Example - use custom highlight visual

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [ {
      type: "area",
      data: [1, 2, 3],
      highlight: {
        visual: function(e) {
          var center = e.rect.center();
          var circleGeometry = new kendo.geometry.Circle(center, 10);
          var circle = new kendo.drawing.Circle(circleGeometry, {
            fill: {
              color: "red"
            }
          });
          return circle;
        }
      }
    }]
  });
</script>