series.border Object

The border of the chart series.

The border option is supported when series.type is set to "bar", "column", "donut", "pie", "bubble", "boxPlot", "candlestick", "ohlc" or "candlestick".

Example - set the chart series border

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      border: {
        width: 2,
        color: "black",
        dashType: "dash",
      },
      data: [1, 2]
    }
  ]
});
</script>

series.border.color String|Function

The color of the border. Accepts a valid CSS color string, including hex and rgb. By default it is set to color of the current series.

Example - set the chart series border color

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      border: {
        width: 2,
        color: "black"
      },
      data: [1, 2]
    }
  ]
});
</script>

series.border.dashType String|Function (default: "solid")

The dash type of the border.

The following dash types are supported:

• "dash" - a line consisting of dashes
• "dashDot" - a line consisting of a repeating pattern of dash-dot
• "dot" - a line consisting of dots
• "longDash" - a line consisting of a repeating pattern of long-dash
• "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
• "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
• "solid" - a solid line

Example - set the chart series border dash type

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      border: {
        width: 2,
        color: "black",
        dashType: "dash",
      },
      data: [1, 2]
    }
  ]
});
</script>

series.border.opacity Number|Function (default: 1)

The opacity of the border. By default the border is opaque.

Example - set the chart series border opacity

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      border: {
        width: 2,
        color: "black",
        opacity: 0.5
      },
      data: [1, 2]
    }
  ]
});
</script>

series.border.width Number|Function (default: 1)

The width of the border in pixels.

Example - set the chart series border width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    border: {
      width: 2
    },
    data: [1, 2]
  }]
});
</script>