HTML_Note

by Erik Zanker

HTML

<script src="https://da7xgjtj801h2.cloudfront.net/2015.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://da7xgjtj801h2.cloudfront.net/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://da7xgjtj801h2.cloudfront.net/2015.1.318/styles/kendo.fiori.min.css">
<div id="example" class="k-widget" />    
<script id="series-template" type="text/x-kendo-template">
    <div>
    <strong> #:dataItem.name# </strong>
    </div>
</script>

CSS

.k-widget {
	background: transparent;
	border: none;
	overflow: hidden;
	text-align: right;
	width: 100vw;
    height: 200px;
}


table#tooltip{
	border: 1px solid #0096d7;
	border-collapse: collapse;
	border-left:0;
	border-bottom:0;	
    margin-left: -20x;
}

#tooltip th, td{
	padding: 0.25rem;
}

table#tooltip td{	
	text-align:right;
	background-color:#dcdee0;
	
}

.k-tooltip.k-chart-tooltip.k-chart-tooltip-inverse {    
}

JavaScript

var testdata = [
        {name: "Gold", count: 100},
];

var chart = $('#example').kendoChart({
    
    dataSource: {data: testdata},
    title: {text: "Medals"},
    legend: {visible: false},
    seriesDefaults: { 
        type: "bar", 
        stack: "true",
        notes: {
    position: "right",
            label: {
               border: {
                  color: "#0096d7",
                  width: 1
                },
                background: "white",
                position: "outside",
                visible: true,
                template: "#:dataItem.name# \n #:dataItem.count#" }},
                //template: $("#series-template").html() }},
                //template: "<strong> #:dataItem.name# </strong>" }},
        tooltip: {
            background: "white",
            border: {
                width: 0,
                color: "white" }}},
    
    series: [{
        field: "count", 
        name: name, 
        noteTextField: "name"
        }],
    
    tooltip: {visible: true,
        autoHide: false,
              template: function(point){ return _renderTooltip(point)} }
   
}).data('kendoChart');

_renderTooltip = function(point) {
    
    var result = "<table id=\"tooltip\">";
    result += "<tr><th> " + point.dataItem.name + "</th></tr>";
    result += "<tr><td> " + point.dataItem.count+ "</td></tr>";
    result += "</table>"

    return result;
}

var $t = $('#example svg g [clip-path="url(#kdef2) text"]');
var $p = $t.prev("path");

console.log($t);
console.log($p);

$t.attr("fill", "#0096d7");
//$p.css("stroke-width", "1px").css("stroke", "#0096d7");