Array of data items. The data item type can be either a:

  • Array of objects. Each point is bound to the specified series fields.
  • Array of numbers. Available for area, column and line series.
  • Array of arrays of numbers. Available for:
    • OHLC and candlestick series (open, high, low, close)

Set the chart series data as array of objects

pseudo
  <div id="stock-chart"></div>
  <script>
  $("#stock-chart").kendoStockChart({
    series: [
      {
        type: "candlestick",
        data: [{
          open: 2,
          high: 4,
          low: 1,
          close: 3
        }]
      }
    ],
    categoryAxis: {
      categories: [
        new Date(2012, 1, 1)
      ]
    }
  });
  </script>

Set the chart series data as array of arrays

pseudo
    <div id="stock-chart"></div>
    <script>
    $("#stock-chart").kendoStockChart({
      series: [
          {
            type: "candlestick",
            openField: "Open",
            highField: "High",
            lowField: "Low",
            closeField: "Close",
            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
            }
          ]
        }
      ],
      categoryAxis: {
        categories: [
          new Date(2012, 1, 1)
        ]
      }
    });
    </script>

Example

<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",
          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>
In this article
navigator.series.data
Not finding the help you need?
Contact Support