series.target Object

The configuration options of the target

The target option is supported when series.type is set to "bullet" or "verticalBullet".

Example - configure the bullet chart target

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "bullet",
      target: {
        color: "green",
        border: {
          width: 3,
          color: "red"
        },
        line: {
          width: 10
        }
      },
      data: [
        { current: 1, target: 2 }
      ]
    }
  ]
});
</script>

series.target.border Object|Function

The border of the target.

Example - set the bullet chart target border

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

series.target.border.color String|Function (default: "black")

The color of the border.

Example - set the bullet chart target border color

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

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

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 bullet chart target border dash type

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

series.target.border.width Number|Function (default: 0)

The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.

Example - set the bullet chart target border width

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

series.target.color String|Function

The target color.

Example - set the bullet chart target color

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "bullet",
      target: {
        color: "green"
      },
      data: [
        [1, 2]
      ]
    }
  ]
});
</script>

series.target.line Object

The target line options.

Example - set the bullet chart target line options

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

series.target.line.width Number|Function

The width of the line.

Example - set the bullet chart target line width

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