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

Navigator.series.highlight.line

configuration

Line options for highlighted points. The color is computed automatically from the base point color.

** Available only for candlestick series **

navigator.series.highlight.line

Object

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            categoryField: "date",
            highlight: {
                line: {
                    width: 3,
                    color: "red"
                }
            }
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 1, high: 3, low: 0.5, close: 2 },
            { date: new Date("2016/01/02"), open: 2, high: 4, low: 1.5, close: 3 }
        ]
    }
});
</script>

navigator.series.highlight.line.color

String

The line color.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            categoryField: "date",
            highlight: {
                line: {
                    color: "red",
                    width: 2
                }
            }
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 1, high: 3, low: 0.5, close: 2 },
            { date: new Date("2016/01/02"), open: 2, high: 4, low: 1.5, close: 3 }
        ]
    }
});
</script>

navigator.series.highlight.line.opacity

Number

The opacity of the line.

<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",
          highlight: {
                line: {
                    opacity: 0.5
                }
            },
          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.highlight.line.width

Number

The width of the line.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            categoryField: "date",
            highlight: {
                line: {
                    width: 3
                }
            }
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 1, high: 3, low: 0.5, close: 2 },
            { date: new Date("2016/01/02"), open: 2, high: 4, low: 1.5, close: 3 }
        ]
    }
});
</script>