Edit this page

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy