startCapString|Object
The start cap configuration or type name.
Example - configuring the start cap
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
x: 10,
y: 10,
visual: function() {
var group = new kendo.dataviz.diagram.Group();
group.append(new kendo.dataviz.diagram.Polyline({
points: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 100}],
startCap: {
type: "ArrowStart",
fill: "red"
}
}));
return group;
}
}]
});
</script>startCap.fillString|Object
The start cap fill options or color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
visual: function() {
var group = new kendo.dataviz.diagram.Group();
group.append(new kendo.dataviz.diagram.Polyline({
points: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 100}],
startCap: {
type: "ArrowStart",
fill: "green"
}
}));
return group;
}
}]
});
</script>startCap.fill.colorString(default: "black")
The start cap fill color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
visual: function() {
var group = new kendo.dataviz.diagram.Group();
group.append(new kendo.dataviz.diagram.Polyline({
points: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 100}],
startCap: {
type: "ArrowStart",
fill: {
color: "purple"
}
}
}));
return group;
}
}]
});
</script>startCap.fill.opacityNumber
The start cap fill opacity.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
visual: function() {
var group = new kendo.dataviz.diagram.Group();
group.append(new kendo.dataviz.diagram.Polyline({
points: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 100}],
startCap: {
type: "ArrowStart",
fill: {
color: "orange",
opacity: 0.7
}
}
}));
return group;
}
}]
});
</script>startCap.strokeString|Object
The start cap stroke options or color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
visual: function() {
var group = new kendo.dataviz.diagram.Group();
group.append(new kendo.dataviz.diagram.Polyline({
points: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 100}],
startCap: {
type: "ArrowStart",
stroke: "red"
}
}));
return group;
}
}]
});
</script>startCap.stroke.colorString
The start cap stroke color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
visual: function() {
var group = new kendo.dataviz.diagram.Group();
group.append(new kendo.dataviz.diagram.Polyline({
points: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 100}],
startCap: {
type: "ArrowStart",
stroke: {
color: "navy"
}
}
}));
return group;
}
}]
});
</script>startCap.stroke.dashTypeString
The start cap stroke dash type.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
visual: function() {
var group = new kendo.dataviz.diagram.Group();
group.append(new kendo.dataviz.diagram.Polyline({
points: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 100}],
startCap: {
type: "ArrowStart",
stroke: {
color: "black",
dashType: "dot"
}
}
}));
return group;
}
}]
});
</script>startCap.stroke.widthNumber
The start cap stroke width.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
visual: function() {
var group = new kendo.dataviz.diagram.Group();
group.append(new kendo.dataviz.diagram.Polyline({
points: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 100}],
startCap: {
type: "ArrowStart",
stroke: {
color: "black",
width: 2
}
}
}));
return group;
}
}]
});
</script>startCap.typeString(default: "none")
The start cap type.
The supported values are:
- "none": no cap
- "ArrowStart": a filled arrow
- "FilledCircle": a filled circle
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
visual: function() {
var group = new kendo.dataviz.diagram.Group();
group.append(new kendo.dataviz.diagram.Polyline({
points: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 100}],
startCap: {
type: "FilledCircle",
fill: "cyan"
}
}));
return group;
}
}]
});
</script>