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

Series.labels.to

configuration

The chart series to label configuration.

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

series.labels.to

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "rangeArea",
    data: [
      { from: 1, to: 2 },
      { from: 2, to: 3 },
      { from: 3, to: 4 }
    ],
    labels: {
      to: {
        visible: true,
        color: "blue",
        background: "yellow"
      }
    }
  }]
});
</script>

series.labels.to.background

String|Function

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: "rangeArea",
    data: [
      { from: 1, to: 2 },
      { from: 2, to: 3 },
      { from: 3, to: 4 }
    ],
    labels: {
      to: {
        visible: true,
        background: "lightblue"
      }
    }
  }]
});
</script>

series.labels.to.border

Object

The border of the to labels.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "rangeArea",
    data: [
      { from: 1, to: 2 },
      { from: 2, to: 3 },
      { from: 3, to: 4 }
    ],
    labels: {
      to: {
        visible: true,
        border: {
          color: "blue",
          width: 2,
          dashType: "dash"
        }
      }
    }
  }]
});
</script>

series.labels.to.color

String|Function

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: "rangeArea",
    data: [
      { from: 1, to: 2 },
      { from: 2, to: 3 },
      { from: 3, to: 4 }
    ],
    labels: {
      to: {
        visible: true,
        color: "#ff6600"
      }
    }
  }]
});
</script>

series.labels.to.font

String|Function

The font style of the to labels.

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "rangeArea",
    data: [
      { from: 1, to: 2 },
      { from: 2, to: 3 },
      { from: 3, to: 4 }
    ],
    labels: {
      to: {
        visible: true,
        font: "16px Arial"
      }
    }
  }]
});
</script>

series.labels.to.format

String|Function

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

Format placeholders:

{0} - the value

Default: "{0}"

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

series.labels.to.margin

Number|Object

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

Default: 5

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

series.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: "rangeArea",
    data: [
      { from: 1, to: 2 },
      { from: 2, to: 3 },
      { from: 3, to: 4 }
    ],
    labels: {
      to: {
        visible: true,
        padding: 5,
        background: "lightgray"
      }
    }
  }]
});
</script>

series.labels.to.position

String|Function

The position of the to labels.

"center" - the label is positioned at the point center.
"insideBase" - the label is positioned inside, near the base of the bar.
"insideEnd" - the label is positioned inside, near the end of the point.
"outsideEnd" - the label is positioned outside, near the end of the point.
"above" - the label is positioned at the top of the marker. Applicable for "rangeArea" and "verticalRangeArea" series.
"below" - the label is positioned at the bottom of the marker. Applicable for "rangeArea" and "verticalRangeArea" series.
"left" - the label is positioned to the left of the marker. Applicable for "rangeArea" and "verticalRangeArea" series.
"right" - the label is positioned to the right of the marker. Applicable for "rangeArea" and "verticalRangeArea" series.

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

series.labels.to.template

String|Function

The template which renders the chart series to label.

The fields which can be used in the template are:

category - the category name.
dataItem - the original data item used to construct the point. Will be null if binding to array.
series - the data series
value - the point value. An object containing from and to values.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "rangeArea",
    data: [
      { from: 1, to: 2 },
      { from: 2, to: 3 },
      { from: 3, to: 4 }
    ],
    labels: {
      to: {
        visible: true,
        template: (data) => `To: ${data.value.to}`
      }
    }
  }]
});
</script>

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

series.labels.to.visible

Boolean|Function

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: "rangeArea",
    data: [
      { from: 1, to: 2 },
      { from: 2, to: 3 },
      { from: 3, to: 4 }
    ],
    labels: {
      to: {
        visible: true
      }
    }
  }]
});
</script>

Related Members