Skip to content

Commit bd1d606

Browse files
filipKovachevfilipKovachev
authored
Merge pull request #506 from telerik/january-kb-articles
Kb articles for January
2 parents 15ee4f9 + b8ee1ed commit bd1d606

File tree

8 files changed

+1277
-0
lines changed

8 files changed

+1277
-0
lines changed

‎knowledge-base/chart-series-item-border-radius.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: Add border-radius to the Chart's Series items
3+
description: An example on how you can add border-radius to the Chart's series items
4+
page_title: Add border-radius to Chart's Series - Kendo UI for Vue Native Chart
5+
slug: chart-series-item-border-radius
6+
tags: chart,series items, series, border-radius
7+
res_type: kb
8+
category: knowledge-base
9+
---
10+
11+
## Environment
12+
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product Version</td>
17+
<td>4.1.1</td>
18+
</tr>
19+
<tr>
20+
<td>Product</td>
21+
<td>Progress® Kendo UI for Vue Native</td>
22+
</tr>
23+
</tbody>
24+
</table>
25+
26+
## Description
27+
28+
How to add border-radius to the Chart's series items?
29+
30+
## Solution
31+
32+
This can be achieved by creating a custom function which modifies the border and is later passed to the [`visual`](slug:api_charts_chartseriesdefaultsprops#toc_visual) prop.
33+
34+
{% meta id:index height:400 %}
35+
{% embed_file chart-series-item-border-radius/main.vue preview %}
36+
{% embed_file chart-series-item-border-radius/main.js%}
37+
{% embed_file chart-series-item-border-radius/waterfall-data.json %}
38+
{% endmeta %}
39+

‎knowledge-base/examples/chart-series-item-border-radius/main.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue'
2+
import App from './main.vue'
3+
4+
createApp(App).mount('#app')
5+

‎knowledge-base/examples/chart-series-item-border-radius/main.vue‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<template>
2+
<div>
3+
<Chart>
4+
<ChartTooltip :visible="true" />
5+
<ChartLegend :visible="false"> </ChartLegend>
6+
<ChartTitle :text="'Cash flow'" />
7+
<ChartSeriesDefaults :visual="visualDefinition"> </ChartSeriesDefaults>
8+
<ChartValueAxis>
9+
<ChartValueAxisItem>
10+
<ChartValueAxisLabels :format="'c0'" />
11+
</ChartValueAxisItem>
12+
</ChartValueAxis>
13+
<ChartSeries>
14+
<ChartSeriesItem
15+
:type="'column'"
16+
:name="'HL Mountain Rear Weel'"
17+
:data-items="waterfallData"
18+
:color="pointColor"
19+
:field="'amount'"
20+
:categoryField="'period'"
21+
:summaryField="'summary'"
22+
>
23+
<ChartSeriesLabels :position="'insideEnd'" :format="'C0'">
24+
</ChartSeriesLabels>
25+
</ChartSeriesItem>
26+
</ChartSeries>
27+
</Chart>
28+
</div>
29+
</template>
30+
<script>
31+
import {
32+
ChartSeriesLabels,
33+
ChartLegend,
34+
ChartValueAxisTitle,
35+
ChartValueAxisLabels,
36+
Chart,
37+
ChartSeries,
38+
ChartSeriesItem,
39+
ChartTitle,
40+
ChartTooltip,
41+
ChartValueAxis,
42+
ChartValueAxisItem,
43+
ChartSeriesDefaults,
44+
} from '@progress/kendo-vue-charts';
45+
46+
import {
47+
Path,
48+
LinearGradient,
49+
geometry,
50+
Arc,
51+
Group,
52+
} from '@progress/kendo-drawing';
53+
54+
import data from './waterfall-data.json';
55+
import 'hammerjs';
56+
57+
function createColumn(rect, color) {
58+
var origin = rect.origin;
59+
var center = rect.center();
60+
var bottomRight = rect.bottomRight();
61+
var radiusX = rect.width() / 2;
62+
var radiusY = radiusX / 3;
63+
var gradient = new LinearGradient({
64+
stops: [
65+
{
66+
offset: 0,
67+
color: color,
68+
},
69+
{
70+
offset: 0.5,
71+
color: color,
72+
opacity: 0.9,
73+
},
74+
{
75+
offset: 0.5,
76+
color: color,
77+
opacity: 0.9,
78+
},
79+
{
80+
offset: 1,
81+
color: color,
82+
},
83+
],
84+
});
85+
86+
var path = new Path({
87+
fill: gradient,
88+
stroke: {
89+
color: 'none',
90+
},
91+
})
92+
.moveTo(origin.x, origin.y)
93+
.lineTo(origin.x, bottomRight.y)
94+
.lineTo(origin.x + rect.width(), bottomRight.y)
95+
.lineTo(bottomRight.x, origin.y)
96+
.arc(0, 180, radiusX, radiusY * 3, true);
97+
98+
var topArcGeometry = new geometry.Arc([center.x, origin.y], {
99+
startAngle: 0,
100+
endAngle: 360,
101+
radiusX: radiusX,
102+
radiusY: radiusY * 3,
103+
});
104+
105+
var topArc = new Arc(topArcGeometry, {
106+
fill: {
107+
color: color,
108+
},
109+
stroke: {
110+
color: color,
111+
},
112+
});
113+
var group = new Group();
114+
group.append(path);
115+
return group;
116+
}
117+
118+
export default {
119+
components: {
120+
ChartSeriesLabels,
121+
ChartLegend,
122+
ChartValueAxisTitle,
123+
ChartValueAxisLabels,
124+
Chart,
125+
ChartSeries,
126+
ChartSeriesItem,
127+
ChartTitle,
128+
ChartTooltip,
129+
ChartValueAxis,
130+
ChartValueAxisItem,
131+
ChartSeriesDefaults,
132+
},
133+
data: function () {
134+
return {
135+
waterfallData: data,
136+
};
137+
},
138+
methods: {
139+
visualDefinition(e) {
140+
return createColumn(e.rect, e.options.color);
141+
},
142+
pointColor(point) {
143+
let summary = point.dataItem.summary;
144+
145+
if (summary) {
146+
return summary === 'total' ? '#555' : 'gray';
147+
}
148+
149+
if (point.value > 0) {
150+
return 'green';
151+
} else {
152+
return 'red';
153+
}
154+
},
155+
},
156+
};
157+
</script>
158+

‎knowledge-base/examples/chart-series-item-border-radius/waterfall-data.json‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
[
2+
{
3+
"period": "Beginning \n Balance",
4+
"amount": 50000
5+
},
6+
{
7+
"period": "Jan",
8+
"amount": 17000
9+
},
10+
{
11+
"period": "Feb",
12+
"amount": 14000
13+
},
14+
{
15+
"period": "Mar",
16+
"amount": 12000
17+
},
18+
{
19+
"period": "Q1",
20+
"summary": "runningTotal"
21+
},
22+
{
23+
"period": "Apr",
24+
"amount": 22000
25+
},
26+
{
27+
"period": "May",
28+
"amount": 18000
29+
},
30+
{
31+
"period": "Jun",
32+
"amount": 10000
33+
},
34+
{
35+
"period": "Q2",
36+
"summary": "runningTotal"
37+
},
38+
{
39+
"period": "Ending \n Balance",
40+
"summary": "total"
41+
}
42+
]
43+

0 commit comments

Comments
 (0)