Achieve RTL Alignment in the Chart by Using the Drawing API
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I set visualize data in the Chart in a right-to-left (RTL) direction?
Solution
Currently, the Kendo UI widgets for data visualization do not provide official right-to-left (RTL) support.
However, you can achieve a similar outcome in a Kendo UI Chart by using the Drawing API.
<div id="chart" style="width: 200px;"></div>
<script>
var index = 0;
$("#chart").kendoChart({
legend: {
visible: true,
position: "bottom",
align: "end",
item: {
visual: function (e)
{
var color = e.options.markers.background;
var labelColor = e.options.labels.color;
var rect = new kendo.geometry.Rect([0, 0], [150, 50]);
var index = e.pointIndex;
var layout = new kendo.drawing.Layout(rect, {
spacing: 5,
justifyContent: "end"
});
var marker = new kendo.drawing.Path({
fill: {
color: color
},
stroke: {
color: "none"
}
}).moveTo(10, 0).lineTo(10, 10).lineTo(0, 10).lineTo(0, 0).close();
var label = new kendo.drawing.Text(e.series.data[index].category, [0, 0], {
fill: {
color: labelColor
}
});
layout.append(label, marker);
layout.reflow()
var overlay = kendo.drawing.Path.fromRect(new kendo.geometry.Rect([0, 0], [150, 20]), {
fill: {
color: "#fff",
opacity: 0
},
stroke: {
color: "none"
},
cursor: "pointer"
});
layout.append(overlay);
return layout;
}
}
},
seriesDefaults: {
labels: {
visible: false,
background: "transparent",
template: "#= category #: #= value#%"
}
},
series: [{
type: "pie",
startAngle: 150,
data: [{
category: "Asia",
value: 53.8,
color: "#9de219"
},{
category: "Europe",
value: 16.1,
color: "#90cc38"
},{
category: "Latin America",
value: 11.3,
color: "#068c35"
},{
category: "Africa",
value: 9.6,
color: "#006634"
},{
category: "Middle East",
value: 5.2,
color: "#004d38"
},{
category: "North America",
value: 3.6,
color: "#033939"
}]
}],
title: {
text: "Chart title",
align: "right"
},
tooltip: {
visible: false,
format: "{0}%"
}
});
</script>