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

Series.highlight

configuration

The chart series highlighting configuration options.

series.highlight

Object

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

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

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

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

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

The markers configuration of the series highlight.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    markers: {
      visible: true,
      type: "roundedRect"
    },
    highlight: {
      markers: {
        border: {
          color: 'blue',
          width: 2
        },
        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".

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

<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

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.

Default: true

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

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

Related Members