Back to all docs
API Reference / dataviz / ui / StockChart / legend
New to Kendo UI for jQuery? Start a free 30-day trial

Legend

configuration

The chart legend configuration options.

legend

Object
pseudo
    $("#chart").kendoChart({
        legend: {
            // set the background color to a dark blue
            background: "#336699",
            labels: {
                // set the font to a size of 14px
                font: "14px Arial,Helvetica,sans-serif",
                // set the color to red
                color: "red"
            },
            // move the legend to the left
            position: "left",
            // move the legend a bit closer to the chart by setting the x offset to 20
            offsetX: 20,
            // move the legend up to the top by setting the y offset to -100
            offsetY: -100,
        }
    });

legend.background

String

The background color of the legend. Any valid CSS color string will work here, including hex and rgb.

Default: "white"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 16, volume: 1500 }
        ]
    },
    dateField: "date",
    legend: {
        visible: true,
        background: "lightgray"
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

legend.border

Object

The border of the legend.

pseudo
    $("#chart").kendoChart({
        legend: {
            border: {
                // set the border width to 2 pixels
                width: 2,
                // set the color to grey
                color: "grey",
                // set the dash type to solid. this is the default so we could leave this line out.
                dashType: "solid"
            }
        },
        ...
    });

legend.inactiveItems

Object

Configures the legend inactive items.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    legend: {
        inactiveItems: {
            labels: {
                color: "gray"
            }
        }
    },
    series: [{
        name: "Series 1",
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
        visibleInLegend: false
    }]
});
</script>

legend.item

Object

The configuration of the Chart legend item.

To override the marker configuration of individual series, use the series.legendItem settings of the series.

<div id="chart"></div>
<script>
$("#chart").kendoStockChart({
  dataSource: {
    data: [{
      "Date": "2016/01/01",
      "Open": 41.62,
      "High": 41.69,
      "Low": 39.81,
      "Close": 40.12,
      "Volume": 2632000
    }, {
      "Date": "2016/03/01",
      "Open": 40.62,
      "High": 39.69,
      "Low": 40.81,
      "Close": 39.12,
      "Volume": 2631986
    }]
  },
  dateField: "Date",
  series: [{
      name: "Series 1",
      type: "line",
      markers: {
        visible: true
      },
      field: "Close"
  }],
  legend: {
    visible: true,
    position: 'bottom',
    item: {
      highlight: {
        visible: false
      }
    }
  }
});
</script>
<div id="chart"></div>
<script>
$("#chart").kendoStockChart({
  dataSource: {
    data: [{
      "Date": "2016/01/01",
      "Open": 41.62,
      "High": 41.69,
      "Low": 39.81,
      "Close": 40.12,
      "Volume": 2632000
    }, {
      "Date": "2016/03/01",
      "Open": 40.62,
      "High": 39.69,
      "Low": 40.81,
      "Close": 39.12,
      "Volume": 2631986
    }]
  },
  dateField: "Date",
  series: [{
    name: "Series 1",
    type: "candlestick",
    openField: "Open",
    highField: "High",
    lowField: "Low",
    closeField: "Close"
  }],
  legend: {
    visible: true,
    position: 'bottom'
  },
  seriesDefaults: {
      /* Use these settings to emulate the legacy legend item rendering */
      legendItem: {
          type: 'line',
          line: {
              dashType: 'solid',
          },
          markers: {
              visible: false
          },
          highlight: {
              visible: false
          }
      }
  }
});
</script>

legend.labels

Object

Configures the legend labels.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    legend: {
        labels: {
            color: "red",
            font: "16px Arial"
        }
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 25 },
            { date: new Date(2023, 0, 3), value: 15 }             
        ],
    }]
});
</script>

legend.margin

Number | Object

The margin of the legend.

Default: 10

pseudo
    $("#chart").kendoChart({
        legend: {
            // sets the top, right, bottom and left margin to 3px.
            margin: 3
        },
        //...
    });
    //
    $("#chart").kendoChart({
        legend: {
            // sets the top and left margin to 1px
            // margin right and bottom are with 10px (by default)
            margin: { top: 1, left: 1 }
        },
        //...
    });

legend.offsetX

Number

The X offset from its position. The offset is relative to the current position of the legend. For instance, a value of 20 will move the legend 20 pixels to the right of it's initial position. A negative value will move the legend to the left of the current position.

Default: 0

pseudo
    $("#chart").kendoChart({
        legend: {
            // move the legend to the left side of the chart
            offsetX: 20
        },
        ...
    });

legend.offsetY

Number

The Y offset from its position. The offset is relative to the current position of the legend. For instance, a value of 20 will move the legend 20 pixels down from it's initial position. A negative value will move the legend upwards from the current position.

Default: 0

pseudo
    $("#chart").kendoChart({
        legend: {
            // move the legend up 100 pixels
            offsetY: -100
        },
        ...
    });

legend.padding

Number | Object

The padding of the legend.

Default: 5

pseudo
    // sets the top, right, bottom and left padding to 3px.
    $("#chart").kendoChart({
        legend: {
            // sets the top, right, bottom and left padding to 3px.
            padding: 3
        },
        ...
    });
    //
    $("#chart").kendoChart({
        legend: {
           // sets the top and left padding to 1px
           // padding right and bottom are with 5px (by default)
           padding: { top: 1, left: 1 }
        },
        ...
    });

legend.position

String

The positions of the legend.

"top"

The legend is positioned on the top.

"bottom"

The legend is positioned on the bottom.

"left"

The legend is positioned on the left.

"right"

The legend is positioned on the right.

"custom"

The legend is positioned using OffsetX and OffsetY.

Default: "right"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    legend: {
        position: "top"
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 25 },
            { date: new Date(2023, 0, 3), value: 15 }             
        ],
    }]
});
</script>

legend.reverse

Boolean

If set to true the legend items will be reversed.

Available in versions 2013.3.1306 and later.

Default: false

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    legend: {
        reverse: true
    },
    series: [{
        name: "Series 1",
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }, {
        name: "Series 2", 
        type: "line",
        data: [
            { date: new Date(2023, 0, 4), value: 50 },
            { date: new Date(2023, 0, 5), value: 30 },
            { date: new Date(2023, 0, 6), value: 45 }
        ],
    }]
});
</script>

legend.title

Object

The legend title configuration options or text.

<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",
        },
      ],
      legend: {
        title: {
            text: "Legend Title",
            color: "blue"
        }
      },
      navigator: {
        series: {
          type: "line",
          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>

legend.visible

Boolean

The visibility of the legend.

Default: false

pseudo
    $("#chart").kendoChart({
        legend: {
            // show the legend
            visible: true
        },
        ...
    });

Related Members

In this article
legendlegend.backgroundlegend.borderlegend.inactiveItemslegend.itemlegend.labelslegend.marginlegend.offsetXlegend.offsetYlegend.paddinglegend.positionlegend.reverselegend.titlelegend.visible
Not finding the help you need?
Contact Support