startCapString|Object
The start cap configuration or type name.
Example - configuring the start cap
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
visual: function() {
var group = new kendo.dataviz.diagram.Group();
group.append(new kendo.dataviz.diagram.Path({
data: 'M 0,0 L100,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.Path({
data: 'M 0,0 L100,100',
startCap: {
type: "ArrowStart",
fill: {
color: "green",
opacity: 0.9
}
}
}));
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.Path({
data: 'M 0,0 L100,100',
startCap: {
type: "ArrowStart",
fill: {
color: "orange"
}
}
}));
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.Path({
data: 'M 0,0 L100,100',
startCap: {
type: "FilledCircle",
fill: {
color: "red",
opacity: 0.4
}
}
}));
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.Path({
data: 'M 0,0 L100,100',
startCap: {
type: "ArrowStart",
fill: "red",
stroke: {
color: "black",
width: 2
}
}
}));
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.Path({
data: 'M 0,0 L100,100',
startCap: {
type: "ArrowStart",
stroke: {
color: "#ff6600"
}
}
}));
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.Path({
data: 'M 0,0 L100,100',
startCap: {
type: "ArrowStart",
stroke: {
color: "blue",
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.Path({
data: 'M 0,0 L100,100',
startCap: {
type: "ArrowStart",
stroke: {
color: "black",
width: 4
}
}
}));
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.Path({
data: 'M 0,0 L100,100',
startCap: {
type: "FilledCircle",
fill: "purple"
}
}));
return group;
}
}]
});
</script>In this article