jpllosa/kendo-chart-custom-visual-image.html

## kendo-chart-custom-visual-image.html
<!-- https://jpllosa.blogspot.com/ -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo Chart Custom Visual Image</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.all.min.js"></script>
</head>

<body>

    <div id="chart"></div>
    <script>
        $("#chart").kendoChart({
            transitions: false,
            dataSource: {
                data: [
                    { value: 98 },
                    { value: 10 },
                    { value: 28 },
                    { value: 35 },
                    { value: 64 }
                ],
            },
            categoryAxis: {
                categories: [
                    "Category A",
                    "Category B",
                    "Category C",
                    "Category D",
                    "Category E"
                ],
            },
            series: [{
                type: "column",
                field: "value",
                color: "#3e90ce77",
                labels: {
                    visible: true,
                    visual: function (e) {
                        var visual = e.createVisual();
                        var geom = kendo.geometry;
                        var draw = kendo.drawing;
                        var group = new draw.Group();

                        for (let a = 0; a < visual.children.length; a++) {
                            let child = visual.children[a];
                            if (child.nodeType === 'Text') {
                                if (e.value < 30) {
                                    let rect = child.bbox();
                                    let origin = rect.getOrigin();
                                    let size = rect.getSize();
                                    let widthAndHeight = Math.max(size.getWidth(), size.getHeight()) + 10;
                                    let rectGeom = new geom.Rect([origin.getX() - 4, origin.getY() - 10],
                                        [widthAndHeight, widthAndHeight]);
                                    // https://icons.iconarchive.com/icons/graphicpeel/lifesaver/128/Red-Life-Saver-icon.png
                                    // save or replace this file with your own icon and place it in the same directory
                                    // as this HTML file
                                    let icon = new draw.Image('Red-Life-Saver-icon.png', rectGeom);
                                    group.append(icon);
                                } else {
                                    let position = child.position();
                                    let point = new geom.Point(position.getX(),
                                            position.getY() - 10);
                                    let label =
                                        new draw.Text(e.value,
                                            point);
                                    group.append(label);
                                }
                            }
                        }

                        return group;
                    }
                },
            }],
        });
    </script>
</body>

</html>
	<!-- https://jpllosa.blogspot.com/ -->
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>Kendo Chart Custom Visual Image</title>

	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css" />

	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.all.min.js"></script>
	</head>

	<body>

	<div id="chart"></div>
	<script>
	$("#chart").kendoChart({
	transitions: false,
	dataSource: {
	data: [
	{ value: 98 },
	{ value: 10 },
	{ value: 28 },
	{ value: 35 },
	{ value: 64 }
	],
	},
	categoryAxis: {
	categories: [
	"Category A",
	"Category B",
	"Category C",
	"Category D",
	"Category E"
	],
	},
	series: [{
	type: "column",
	field: "value",
	color: "#3e90ce77",
	labels: {
	visible: true,
	visual: function (e) {
	var visual = e.createVisual();
	var geom = kendo.geometry;
	var draw = kendo.drawing;
	var group = new draw.Group();

	for (let a = 0; a < visual.children.length; a++) {
	let child = visual.children[a];
	if (child.nodeType === 'Text') {
	if (e.value < 30) {
	let rect = child.bbox();
	let origin = rect.getOrigin();
	let size = rect.getSize();
	let widthAndHeight = Math.max(size.getWidth(), size.getHeight()) + 10;
	let rectGeom = new geom.Rect([origin.getX() - 4, origin.getY() - 10],
	[widthAndHeight, widthAndHeight]);
	// https://icons.iconarchive.com/icons/graphicpeel/lifesaver/128/Red-Life-Saver-icon.png
	// save or replace this file with your own icon and place it in the same directory
	// as this HTML file
	let icon = new draw.Image('Red-Life-Saver-icon.png', rectGeom);
	group.append(icon);
	} else {
	let position = child.position();
	let point = new geom.Point(position.getX(),
	position.getY() - 10);
	let label =
	new draw.Text(e.value,
	point);
	group.append(label);
	}
	}
	}

	return group;
	}
	},
	}],
	});
	</script>
	</body>

	</html>