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

Navigator.series.labels

configuration

Configures the series data labels.

navigator.series.labels

Object

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
      series: [
        {
          type: "candlestick",
          data: [
            {
              date: new Date(2024, 0, 1),
              open: 150.25,
              high: 152.8,
              low: 149.5,
              close: 152.3,
            },
            {
              date: new Date(2024, 0, 2),
              open: 152.5,
              high: 154.2,
              low: 151.8,
              close: 153.75,
            },
            {
              date: new Date(2024, 0, 3),
              open: 153.8,
              high: 155.4,
              low: 152.9,
              close: 154.2,
            },
            
          ],
          openField: "open",
          highField: "high",
          lowField: "low",
          closeField: "close",
          dateField: "date",
          name: "Stock Price",
          color: "#03a9f4",
          downColor: "#f44336",
        },
      ],
      navigator: {
        series: {
          type: "line",
          labels: {
                visible: true,
                format: "{0}"
            },
          data: [
            {
              date: new Date(2024, 0, 1),
              open: 150.25,
              high: 152.8,
              low: 149.5,
              close: 152.3,
            },
            {
              date: new Date(2024, 0, 2),
              open: 152.5,
              high: 154.2,
              low: 151.8,
              close: 153.75,
            },
            {
              date: new Date(2024, 0, 3),
              open: 153.8,
              high: 155.4,
              low: 152.9,
              close: 154.2,
            },
            
          ],
          field: "close",
          dateField: "date",
          color: "#ff9800",
        },
      },
    });
</script>

navigator.series.labels.ariaTemplate

String | Function

The template which renders the ARIA label for the series labels.

The fields which can be used in the template are:

category - the category name. Available for area, bar, column, bubble, donut, 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 only for 100% stacked charts.
series - the data series
value - the point value. Can be a number or object containing each bound field.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
  dataSource: {
    data: [
      { value: 1, category: "One", date: new Date(2012, 1, 1)},
      { value: 2, category: "Two", date: new Date(2012, 1, 2)}
    ],
    group: { field: "category" }
  },
  dateField: "date",
  navigator: {
    series: [
      {
        field: "value",
        name: "Value: #: group.value #",
        visibleInLegend: true,
        labels: {
          ariaTemplate: "The value for #= series.name # in #= category # is #= value #",
          visible: true
        }
      }
    ]
  },
  legend: {
    visible: true,
    position: "bottom"
  }
});
</script>

navigator.series.labels.background

String

The background color of the labels.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
        series: [
          {
            type: "candlestick",
            colorField: "color",
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
                color: "#f44336",
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
                color: "#4caf50",
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
                color: "#2196f3",
              },
              
            ],
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date",
            name: "Stock Price",
            color: "#03a9f4",
            downColor: "#f44336",
          },
        ],
        navigator: {
          series: {
            type: "line",
            labels: {
                visible: true,
                background: "yellow"
            },
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
              },
              
            ],
            field: "close",
            dateField: "date",
            color: "#ff9800",
          },
        },
      });
</script>

navigator.series.labels.border

Object

The border of the labels.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
        series: [
          {
            type: "candlestick",
            colorField: "color",
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
                color: "#f44336",
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
                color: "#4caf50",
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
                color: "#2196f3",
              },
              
            ],
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date",
            name: "Stock Price",
            color: "#03a9f4",
            downColor: "#f44336",
          },
        ],
        navigator: {
          series: {
            type: "line",
            labels: {
                visible: true,
                border: {
                    color: "red",
                    width: 2
                }
            },
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
              },
              
            ],
            field: "close",
            dateField: "date",
            color: "#ff9800",
          },
        },
      });
</script>

navigator.series.labels.color

String

The text color of the labels.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
        series: [
          {
            type: "candlestick",
            colorField: "color",
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
                color: "#f44336",
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
                color: "#4caf50",
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
                color: "#2196f3",
              },
              
            ],
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date",
            name: "Stock Price",
            color: "#03a9f4",
            downColor: "#f44336",
          },
        ],
        navigator: {
          series: {
            type: "line",
            labels: {
                visible: true,
                color: "red"
            },
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
              },
              
            ],
            field: "close",
            dateField: "date",
            color: "#ff9800",
          },
        },
      });
</script>

navigator.series.labels.font

String

The font style of the labels.

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
        series: [
          {
            type: "candlestick",
            colorField: "color",
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
                color: "#f44336",
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
                color: "#4caf50",
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
                color: "#2196f3",
              },
              
            ],
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date",
            name: "Stock Price",
            color: "#03a9f4",
            downColor: "#f44336",
          },
        ],
        navigator: {
          series: {
            type: "line",
            labels: {
                visible: true,
                font: "16px Arial"
            },
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
              },
              
            ],
            field: "close",
            dateField: "date",
            color: "#ff9800",
          },
        },
      });
</script>

navigator.series.labels.format

String

The format of the labels.

pseudo

    //sets format of the labels
    format: "C"

navigator.series.labels.margin

Number|Object

The margin of the labels.

Default: { left: 5, right: 5}

pseudo

    // sets the top, right, bottom and left margin to 3px.
    margin: 3

    // sets the top and bottom margin to 1px
    // margin left and right are with 5px (by default)
    margin: { top: 1, bottom: 1 }

navigator.series.labels.padding

Number|Object

The padding of the labels.

Default: 0

pseudo

    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    // padding right and bottom are with 0px (by default)
    padding: { top: 1, left: 1 }

navigator.series.labels.position

String

Defines the position of the labels.

"above"

The label is positioned at the top of the marker.

** Applicable for area and line series. **

"center"

The label is positioned at the point center.

** Applicable for column series only. **

"insideEnd"

The label is positioned inside, near the end of the point.

** Applicable for column series only. **

"insideBase"

The label is positioned inside, near the base of the bar.

** Applicable for column series. **

"outsideEnd"

The label is positioned outside, near the end of the bar.

** Applicable for column series only. Not applicable for stacked series. **

"right"

The label is positioned to the right of the marker.

** Applicable for area and line series. **

"below"

The label is positioned at the bottom of the marker.

** Applicable for area and line series. **

"left"

The label is positioned to the left of the marker.

** Applicable for area and line series. **

Default: "above"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
        series: [
          {
            type: "candlestick",
            colorField: "color",
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
                color: "#f44336",
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
                color: "#4caf50",
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
                color: "#2196f3",
              },
              
            ],
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date",
            name: "Stock Price",
            color: "#03a9f4",
            downColor: "#f44336",
          },
        ],
        navigator: {
          series: {
            type: "line",
            labels: {
                visible: true,
                position: "below"
            },
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
              },
              
            ],
            field: "close",
            dateField: "date",
            color: "#ff9800",
          },
        },
      });
</script>

navigator.series.labels.template

String | Function

The template which renders the chart series label.

The fields which can be used in the template are:

category - the category name. Available for area, bar, column, bubble, donut, 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 only for 100% stacked charts.
series - the data series
value - the point value. Can be a number or object containing each bound field.

pseudo

    $("#chart").kendoChart({
         title: {
             text: "My Chart Title"
         },
         series: [
             {
                 type: "area",
                 name: "Series 1",
                 data: [200, 450, 300, 125],
                 labels: {
                     // label template
                     template: "#= value #%",
                     visible: true
                 }
             }
         ],
         categoryAxis: {
             categories: [2000, 2001, 2002, 2003]
         }
    });

navigator.series.labels.visible

Boolean

The visibility of the labels.

Default: false

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
        series: [
          {
            type: "candlestick",
            colorField: "color",
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
                color: "#f44336",
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
                color: "#4caf50",
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
                color: "#2196f3",
              },
              
            ],
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date",
            name: "Stock Price",
            color: "#03a9f4",
            downColor: "#f44336",
          },
        ],
        navigator: {
          series: {
            type: "line",
            labels: {
                visible: true,
            },
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
              },
              
            ],
            field: "close",
            dateField: "date",
            color: "#ff9800",
          },
        },
      });
</script>

Related Members