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

Series.border

configuration

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".

series.border

Object

<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.

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

series.border.dashType

String|Function

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

Default: "solid"

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

series.border.opacity

Number|Function

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

Default: 1

<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

The width of the border in pixels.

Default: 1

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