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

SeriesDefaults.labels.from

configuration

The chart series from label configuration.

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

seriesDefaults.labels.from

Object

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

seriesDefaults.labels.from.background

String

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

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

seriesDefaults.labels.from.border

Object

The border of the from labels.

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

seriesDefaults.labels.from.color

String

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

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

seriesDefaults.labels.from.font

String

The font style of the from labels.

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

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

seriesDefaults.labels.from.format

String

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

Default: "{0}"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  seriesDefaults: {
    type: "rangeColumn",
    labels: {
      from: {
        visible: true,
        format: "{0:N2}"
      }
    }
  },
  series: [{
    data: [[1.5, 3.2], [2.8, 5.1], [3.3, 7.9]]
  }]
});
</script>

seriesDefaults.labels.from.margin

Number|Object

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

Default: 0

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

seriesDefaults.labels.from.padding

Number|Object

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

Default: 0

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

seriesDefaults.labels.from.template

String|Function

The template which renders the chart series from label.

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

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

seriesDefaults.labels.from.visible

Boolean

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

Default: false

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

Related Members