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

ToggleHighlight

methods

Toggles the highlight of the series points or a segment for pie, donut and funnel, pyramid charts.

toggleHighlight

Parameters:showBoolean

A boolean value that specifies if the highlight should be shown or hidden.

optionsString|Object|Function

A string representing the series name or the category name or an object with the series and category names or a function which will be called for each point. The fields available in the function argument are:

category - the point category.
dataItem - the point dataItem.
value - the point value.
series - the point 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.

options.seriesString

The series name.

options.categoryString

The category name.

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [
      { name: "A", data: [1, 2] },
      { name: "B", data: [3, 4] }
    ]
  });

  var chart = $("#chart").data("kendoChart");

  chart.toggleHighlight(true, "A");
</script>

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

  var chart = $("#chart").data("kendoChart");

  chart.toggleHighlight(true, "A");
</script>

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "donut",
      name: "SeriesA",
      data: [{value: 1, category: "A"}, {value: 2, category: "B"}]
    }, {
      type: "donut",
      name: "SeriesB",
      data: [{value: 3, category: "A"}, {value: 4, category: "B"}]
    }]
  });

  var chart = $("#chart").data("kendoChart");

  chart.toggleHighlight(true, {
    series: "SeriesB",
    category: "A"
  });
</script>

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [
      { name: "A", data: [1, 2] },
      { name: "B", data: [3, 4] }
    ]
  });

  var chart = $("#chart").data("kendoChart");

  chart.toggleHighlight(true, function(point) {
    return point.value === 3;
  });
</script>