KendoUI chart with hatch

by Erik Zanker

HTML

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.bootstrap.min.css">
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
 <div style="position: absolute; width: 0; height: 0;">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <pattern id="pattern1" width="4" height="4" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="2" style="stroke:black; stroke-width:1" />
        </pattern>
        
        <pattern id="pattern2" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="10" style="stroke:black; stroke-width:1" />
        </pattern>
      </defs>
    </svg>
</div>

<div id="chart"></div>

JavaScript

var drawing = kendo.drawing;
        var geometry = kendo.geometry;
        function createChart() {
            $("#chart").kendoChart({
                theme: "flat",
                seriesDefaults: {
                    type: "column",
                },
                series: [{
                    name: "S1",
                    color: "url(#pattern1)",
                    data: [10, 30, 20, 45, 60]
                },{
                    name: "S2",
                    color: "url(#pattern2)",
                    data: [20, 10, 14, 56, 89]
                } ],
                valueAxis: {
                    majorGridLines: {
                        visible: false
                    },
                },
                categoryAxis: {
                    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
                    majorGridLines: {
                        visible: false
                    },
                },
            });
          
          

        }



$(document).ready(createChart);