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

CategoryAxis.highlight

configuration

The highlight configuration options for the category axis.

categoryAxis.highlight

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["2012", "2013"],
    highlight: {
      visible: true,
      color: "#ff0000",
      opacity: 0.2
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.highlight.border

Object

The border options for the category highlight.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["2012", "2013"],
    highlight: {
      visible: true,
      border: {
        color: "#000000",
        width: 2
      }
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.highlight.color

String

The fill color of the category highlight. Accepts a valid CSS color string, including hex and rgb.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["2012", "2013"],
    highlight: {
      visible: true,
      color: "#ff0000"
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.highlight.opacity

Number

The opacity of the category highlight. By default the category highlight is opaque.

Default: 1

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["2012", "2013"],
    highlight: {
      visible: true,
      color: "#ff0000",
      opacity: 0.2
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.highlight.visible

Boolean

If set to true the chart will display the category highlight. By default the category highlight is not displayed.

Default: false

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["2012", "2013"],
    highlight: {
      visible: true
    }
  },
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>