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

SeriesDefaults.labels.to

configuration

The chart series to label configuration.

The chart displays the series labels when the seriesDefaults.labels.visible option is set to true or when the seriesDefaults.labels.to.visible option is set to true.

seriesDefaults.labels.to

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  seriesDefaults: {
    type: "rangeColumn",
    labels: {
      to: {
        visible: true,
        color: "red"
      }
    }
  },
  series: [{
    data: [[1, 3], [2, 5], [3, 7]]
  }]
});
</script>

seriesDefaults.labels.to.background

String

The background color of the to labels. Accepts a valid CSS color string, including hex and rgb.

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "rangeColumn",
      data: [[5, 10], [7, 15], [9, 20]],
      labels: {
        to: {
          background: "lightblue",
          visible: true
        }
      }
    }]
  });
</script>

seriesDefaults.labels.to.border

Object

The border of the to labels.

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "rangeColumn",
      data: [[5, 10], [7, 15], [9, 20]],
      labels: {
        to: {
          border: {
            color: "red",
            width: 2
          },
          visible: true
        }
      }
    }]
  });
</script>

seriesDefaults.labels.to.color

String

The text color of the to labels. Accepts a valid CSS color string, including hex and rgb.

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "rangeColumn",
      data: [[5, 10], [7, 15], [9, 20]],
      labels: {
        to: {
          color: "red",
          visible: true
        }
      }
    }]
  });
</script>

seriesDefaults.labels.to.font

String

The font style of the to labels.

Default: "12px Arial,Helvetica,sans-serif"

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "rangeColumn",
      data: [[5, 10], [7, 15], [9, 20]],
      labels: {
        to: {
          font: "16px bold Arial",
          visible: true
        }
      }
    }]
  });
</script>

seriesDefaults.labels.to.format

String

The format of the to labels. Uses kendo.format.

Default: "{0}"

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "rangeColumn",
      data: [[5, 10], [7, 15], [9, 20]],
      labels: {
        to: {
          format: "Value: {0}",
          visible: true
        }
      }
    }]
  });
</script>

seriesDefaults.labels.to.margin

Number|Object

The margin of the to labels. A numeric value will set all margins.

Default: 0

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "rangeColumn",
      data: [[5, 10], [7, 15], [9, 20]],
      labels: {
        to: {
          margin: 10,
          background: "lightblue",
          visible: true
        }
      }
    }]
  });
</script>

seriesDefaults.labels.to.padding

Number|Object

The padding of the to labels. A numeric value will set all paddings.

Default: 0

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "rangeColumn",
      data: [[5, 10], [7, 15], [9, 20]],
      labels: {
        to: {
          padding: 10,
          background: "lightblue",
          visible: true
        }
      }
    }]
  });
</script>

seriesDefaults.labels.to.template

String|Function

The template which renders the chart series to label.

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "rangeColumn",
      data: [[5, 10], [7, 15], [9, 20]],
      labels: {
        to: {
          template: (data) => `Max: ${data.value}`,
          visible: true
        }
      }
    }]
  });
</script>

The fields which can be used in the template are:

category - the category name. Available for area, bar, column, bubble, donut, funnel, pyramid, line and pie series.
dataItem - the original data item used to construct the point. Will be null if binding to array.
percentage - the point value represented as a percentage value. Available for donut, funnel, pyramid and pie series.
series - the data series
value - the point value. Can be a number or object containing each bound field.
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.

The text can be split into multiple lines by using line feed characters ("\n").

seriesDefaults.labels.to.visible

Boolean

If set to true the chart will display the series to labels. By default chart series to labels are not displayed.

Default: false

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    series: [{
        type: "rangeColumn",
        data: [[1, 5], [2, 7], [3, 4]],
        labels: {
            to: {
                visible: true
            }
        }
    }]
});
</script>

Related Members