JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">
<div id="chart"></div>

JavaScript

var dsData = [
	{"LogicalSize":10,"FolderPath":"\\\\domain1\\ad users\\"},
  {"LogicalSize":20,"FolderPath":"\\\\domain1\\nt admins\\"},
  {"LogicalSize":30,"FolderPath":"\\\\domain2\\test user1\\"},
  {"LogicalSize":40,"FolderPath":"\\\\domain2\\test user1\\"},
  {"LogicalSize":50,"FolderPath":"\\\\domain3\\eval users\\"}
];

$("#chart").kendoChart({
	dataSource: {
  	data: dsData,
    schema: {
    	model: {
					fields: {
						LogicalSize: {
							type: "number"
						},
						FolderPath: {
            	type: "string"
						}
					}
				}
    }
  },
  series: [{
  	type: "area",
		field: "LogicalSize",
		categoryField: "FolderPath",
		missingValues: "interpolate",
		width: 2
  }],
  seriesDefaults: {
		stack: false,
		overlay: {
			gradient: null
		}
	},
  legend: {
  	visible: false
  },
  categoryAxis: [{
		maxDateGroups: 20,
		baseUnitStep: "auto",
		roundToBaseUnit: false,
		labels: {
    	template: '#= data.value.replace(/\\\\/g, "/") #',
			rotation: {
				angle: "auto"
			}
		}
	}],
	tooltip: {
		visible: true
	},
	chartArea: {
		height: 300,
		background: "transparent"
	},
});