Merge pull request #510 from telerik/jan-kb-articles

add kb article for January

Author: zdravkov

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

@@ -0,0 +1,39 @@
+---
+title: Add border-radius to the Chart Series items
+description: An example on how you can add border-radius to the Chart's series items
+type: how-to
+page_title: Add border-radius to Chart's Series - Kendo UI for Vue Native Chart
+slug: chart-series-item-border-radius
+tags: chart,series items, series, border-radius
+res_type: kb
+category: knowledge-base
+---
+
+## Environment
+
+<table>
+    <tbody>
+	    <tr>
+	    	<td>Product Version</td>
+	    	<td>4.1.1</td>
+	    </tr>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>Progress® Kendo UI for Vue Native</td>
+	    </tr>
+    </tbody>
+</table>
+
+## Description
+
+How to add border-radius to the Chart's series items?
+
+## Solution
+
+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.
+
+{% meta id:index height:400 %}
+{% embed_file chart-series-item-border-radius/main.vue preview %}
+{% embed_file chart-series-item-border-radius/main.js%}
+{% embed_file chart-series-item-border-radius/waterfall-data.json %}
+{% endmeta %}

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

@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+
+createApp(App).mount("#app");

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

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTooltip :visible="true" />
+      <ChartLegend :visible="false"> </ChartLegend>
+      <ChartTitle :text="'Cash flow'" />
+      <ChartSeriesDefaults :visual="visualDefinition"> </ChartSeriesDefaults>
+      <ChartValueAxis>
+        <ChartValueAxisItem>
+          <ChartValueAxisLabels :format="'c0'" />
+        </ChartValueAxisItem>
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'column'"
+          :name="'HL Mountain Rear Weel'"
+          :data-items="waterfallData"
+          :color="pointColor"
+          :field="'amount'"
+          :categoryField="'period'"
+          :summaryField="'summary'"
+        >
+          <ChartSeriesLabels :position="'insideEnd'" :format="'C0'">
+          </ChartSeriesLabels>
+        </ChartSeriesItem>
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  ChartSeriesLabels,
+  ChartLegend,
+  ChartValueAxisTitle,
+  ChartValueAxisLabels,
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartTitle,
+  ChartTooltip,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartSeriesDefaults,
+} from "@progress/kendo-vue-charts";
+
+import {
+  Path,
+  LinearGradient,
+  geometry,
+  Arc,
+  Group,
+} from "@progress/kendo-drawing";
+
+import data from "./waterfall-data.json";
+import "hammerjs";
+
+function createColumn(rect, color) {
+  var origin = rect.origin;
+  var center = rect.center();
+  var bottomRight = rect.bottomRight();
+  var radiusX = rect.width() / 2;
+  var radiusY = radiusX / 3;
+  var gradient = new LinearGradient({
+    stops: [
+      {
+        offset: 0,
+        color: color,
+      },
+      {
+        offset: 0.5,
+        color: color,
+        opacity: 0.9,
+      },
+      {
+        offset: 0.5,
+        color: color,
+        opacity: 0.9,
+      },
+      {
+        offset: 1,
+        color: color,
+      },
+    ],
+  });
+
+  var path = new Path({
+    fill: gradient,
+    stroke: {
+      color: "none",
+    },
+  })
+    .moveTo(origin.x, origin.y)
+    .lineTo(origin.x, bottomRight.y)
+    .lineTo(origin.x + rect.width(), bottomRight.y)
+    .lineTo(bottomRight.x, origin.y)
+    .arc(0, 180, radiusX, radiusY * 3, true);
+
+  var topArcGeometry = new geometry.Arc([center.x, origin.y], {
+    startAngle: 0,
+    endAngle: 360,
+    radiusX: radiusX,
+    radiusY: radiusY * 3,
+  });
+
+  var topArc = new Arc(topArcGeometry, {
+    fill: {
+      color: color,
+    },
+    stroke: {
+      color: color,
+    },
+  });
+  var group = new Group();
+  group.append(path);
+  return group;
+}
+
+export default {
+  components: {
+    ChartSeriesLabels,
+    ChartLegend,
+    ChartValueAxisTitle,
+    ChartValueAxisLabels,
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTitle,
+    ChartTooltip,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartSeriesDefaults,
+  },
+  data: function () {
+    return {
+      waterfallData: data,
+    };
+  },
+  methods: {
+    visualDefinition(e) {
+      return createColumn(e.rect, e.options.color);
+    },
+    pointColor(point) {
+      let summary = point.dataItem.summary;
+
+      if (summary) {
+        return summary === "total" ? "#555" : "gray";
+      }
+
+      if (point.value > 0) {
+        return "green";
+      } else {
+        return "red";
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,42 @@
+[
+  {
+    "period": "Beginning \n Balance",
+    "amount": 50000
+  },
+  {
+    "period": "Jan",
+    "amount": 17000
+  },
+  {
+    "period": "Feb",
+    "amount": 14000
+  },
+  {
+    "period": "Mar",
+    "amount": 12000
+  },
+  {
+    "period": "Q1",
+    "summary": "runningTotal"
+  },
+  {
+    "period": "Apr",
+    "amount": 22000
+  },
+  {
+    "period": "May",
+    "amount": 18000
+  },
+  {
+    "period": "Jun",
+    "amount": 10000
+  },
+  {
+    "period": "Q2",
+    "summary": "runningTotal"
+  },
+  {
+    "period": "Ending \n Balance",
+    "summary": "total"
+  }
+]