Edit this page

series.connectors Object

The label connectors options.

The connectors option is supported when series.type is set to "donut" or "pie" and series.labels.visible is set to true.

Example - configure the label connectors

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "pie",
    labels: {
      visible: true
    },
    connectors: {
      width: 4,
      color: "red"
    },
    data: [1 , 2]
  }]
});
</script>

series.connectors.color String |Function

The color of the connector. Accepts a valid CSS color string, including hex and rgb.

Example - configure the label connector color

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "pie",
    labels: {
      visible: true
    },
    connectors: {
      color: "red"
    },
    data: [1 , 2]
  }]
});
</script>

series.connectors.padding Number (default: 4)

The padding between the connector line and the label, and connector line and donut chart.

Example - configure the label connector padding

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "pie",
    labels: {
      visible: true
    },
    connectors: {
      padding: 10
    },
    data: [1 , 2]
  }]
});
</script>

series.connectors.width Number (default: 1)

The width of the connector line.

Example - configure the label connector width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "pie",
    labels: {
      visible: true
    },
    connectors: {
      width: 10
    },
    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