This is the code :
$("#chart").kendoChart({
title: {
text: "Distribution of roles per total number of articles(per selected levels)"
},
chartArea: {
width: 800,
heigth: 800,
stack: { type: "100%" }
},
legend: {
visible: true
},
seriesDefaults: {
type: "column"
},
series: [
{
name: "A",
// order: 1,
stack: "Chart",
data: chart_Profiling//[76067, 0, 0]
},
{
name: "B",
// order: 2,
stack: "Chart",
data: chart_Compulsory//[14183, 0, 0]
},
{
name: "C",
// order: 3,
stack: "Chart",
data: chart_Complement//[1197, 465606, 6567]
},
{
name: "HWW",
visibleInLegend: false,
stack: "Chart1",
data: chart_Profiling_1//[76067, 0, 0]
},
{
name: "HWW",
visibleInLegend: false,
stack: "Chart1",
data: chart_Compulsory_1 //[14183, 0, 0]
},
{
name: "HWW",
visibleInLegend: false,
stack: "Chart1",
data: chart_Complement_1//[1197, 465606, 6567]
},
{
name: "OHA E",
visibleInLegend: false,
stack: "Chart2",
data: chart_Profiling_All_SomeArticles//[76067, 0, 0]
},
{
name: "OHA E",
visibleInLegend: false,
stack: "Chart2",
data: chart_Compulsory_All_SomeArticles //[14183, 0, 0]
},
{
name: "OHA E",
visibleInLegend: false,
stack: "Chart2",
data: chart_Complement_All_SomeArticles//[1197, 465606, 6567]
},
],
seriesColors: ["rgb(214,186,114)", "rgb(197,200,203)", "rgb(170,115,80)"],
valueAxis: {
// majorUnit: (max7 / 10),
//max: (max7 + (max7 / 6)),
min: 0,
max: max7,
labels: {
template: "#= kendo.format('{0:N0}', value ) # "
},
line: {
visible: true
}
},
categoryAxis: {
categories: [Category1,Category2,Category3,Category4],
majorGridLines: {
visible: true
},
labels: {
template: labelTemplate,
rotation: -45
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
,
pannable: {
// lock: "y",
// lock: "x"
},
zoomable: {
mousewheel: {
//lock: "y"
},
selection: {
// lock: "y"
}
}
});
}
I need to show the chart as shown in uploaded image.
8 Answers, 1 is accepted
You can rotate the labels using the categoryAxis.labels.rotation option:
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.labels.rotation
Regards,
Stamo Gochev
Telerik by Progress
Rank 1
Hello Stamo,
You did not got my question.I need label for each bar. Please refer image (Mychart.png) for my current code where i can place only single label for two bars(group) where as i need each label for each bar. Refer image(Stack Bar.png) which is my requirement.
Regards,
Gunjan
Hello,
Have you tried to use the categoryAxis.labels.visual function? This is a function that can be used to create a custom visual for the labels. Please refer to the arguments list and the example below the article for more information.
Regards,Boyan Dimitrov
Telerik by Progress
Rank 1
Hi Boyan,
Where is the arguments list and the example?
Again I am elaborating my question in more detail for your understanding please refer image (MyRequirement.png).
I need 3 labels for each bar group as shown in image(MyReqiurement.png).
Below is my code:
$("#chart").kendoChart({
title: {
text: "Distribution of roles per total number of articles per selected levels"
},
chartArea: {
width: 800,
heigth: 500,
stack: { type: "100%" }
},
legend: {
visible: true
},
seriesDefaults: {
type: "column"
},
series: [
{
name: "A",
stack: "Chart",
data: [700, 750, 400]
},
{
name: "B",
stack: "Chart",
data: [1000,800,200]
},
{
name: "C",
stack: "Chart",
data: [1000, 800,200]
},
{
name: "A",
visibleInLegend: false,
stack: "Chart1",
data: [750,500,250]
},
{
name: "B",
visibleInLegend: false,
stack: "Chart1",
data: [700,400,400]
},
{
name: "C",
visibleInLegend: false,
stack: "Chart1",
data: [750,500,250]
},
],
seriesColors: ["rgb(214,186,114)", "rgb(197,200,203)", "rgb(170,115,80)"],
valueAxis: {
max: 5000,
min: 0,
labels: {
template: "#= kendo.format('{0:N0}', value ) # "
},
line: {
visible: true
}
},
categoryAxis: {
categories: [Category 1,Category 2,Category 3,Category 4],
majorGridLines: {
visible: true
},
labels: {
template: labelTemplate
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}, pannable: {
// lock: "y"
},
zoomable: {
mousewheel: {
// lock: "y"
},
selection: {
// lock: "y"
}
}
});
}
function labelTemplate(e) {
var str = e.value;
var len = str.length;
var halflength = len / 2;
var index = str.indexOf(" ", halflength);
var rest = str.substring(0, index);
var last = str.substring(index, len);
return rest + "\n" + last;
}
Hello Gunjan,
In general there is no built-in way to achieve the desired behavior. However I have implemented something similar to the desired scenario, but the column labels are position below the categories labels. Please refer to the http://dojo.telerik.com/AHIya example.
I am afraid that there is no solution which will place the column (bar) labels at the top as shown in the attached image.
Regards,Boyan Dimitrov
Telerik by Progress
Rank 1
Is there is a clean solution for this this without a workaround?
Rank 1
Hi Gunjan,
Were you able to solve this issue ? If so, I would really appreciate if you can share the code here.
Thanks
Vamshi
I want to clarify that there is a default chart functionality that provides a way to display labels for each category/bar. However, if you want to get a different appearance, you can check out how customizing the options for the labels can yield something similar to the expected final result, so technically this is not a "workaround", but rather a custom implementation depending on the exact project requirements. Still, if you want to suggest improvements regarding this, please post them in the Feedback Portal:
https://feedback.telerik.com/aspnet-mvc
I want to add that (by design) a single category on the axis has only one label. If more than one is required, then an additional axis can be used to display the other information. Here is a modified version of the example from my colleague Boyan, which moves the second axis (the one with two labels for each category) above the main axis, which is what I suppose that you want to achieve:
https://dojo.telerik.com/ImuzOJet
If the rotation of the labels is still a requirement, then the "align: center" option should be set on the axis:
https://dojo.telerik.com/oWEciPiH
On the other hand, the alternative approach that was suggested by Boyan in a previous answer - using categoryAxis.labels.visual - is also an option that you can consider.
Regards,
Stamo Gochev
Progress Telerik