This is a migrated thread and some comments may be shown as answers.

Chart theme not working in angularJs

5 Answers 116 Views
Charts
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 26 Aug 2015, 11:37 PM

Hi,

I just found the chart theme doesn't work when using angularJs. It always shows up the default style no matter what css I chose.

But it works if I use the jQuery version. This issue only happens in the Chart component. All the others are working fine.

Would you check this for me pls?

Thanks

5 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 28 Aug 2015, 07:42 AM
Hi John,

You should use string literal to set the theme: 
<div kendo-chart class="chart"
    k-theme="'Bootstrap'"
    <!--...-->
>
</div>

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Devin
Top achievements
Rank 1
answered on 12 Oct 2015, 05:18 PM
I was really confused about this as well, this definitely works, but it seems like a hassle to have to do this everywhere.  Would it be possible to ​set the default k-theme during the angular configuration maybe?  That seems like it fits in with the angular mentality that way.
0
Iliana Nikolova
Telerik team
answered on 14 Oct 2015, 10:53 AM
Hi Devin,

I am not quite sure if I understand correctly your scenario - the theme is part of Kendo UI Chart and should be set in its configuration (as demonstrated in my previous post). As another option, I would suggest setting the theme after the chart has been rendered (kendoRendered event). For your convenience here is a basic example.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Devin
Top achievements
Rank 1
answered on 14 Oct 2015, 01:55 PM

HI Iliana,

 Sorry that I wasn't very clear.   I understood that you can set the theme per chart during the configuration, I was hoping there would be a way you could do it once throughout the entire angular application and it'd affect any chart that you might define. 

 I was specifically thinking of the AngularJS providers where you can configure them during the configuration phase of the angluarjs app loading.

So if there was a KendoChartProvider, you could use 

angularApp.config(['kendoChartProvider'], function(kendoChartProvider) {
 
         kendoChartProvider.defaults = {
               theme:'Bootstrap'
         };
}));

This way any Kendo chart that was defined would have the bootstrap theme applied from the get-go and you wouldn't have to rely upon us forgetful developers to do it everytime for the consistent look and feel and likewise we wouldn't have to rely upon $watch events to apply it after the fact.

 Thanks for the response and the example though.

0
Iliana Nikolova
Telerik team
answered on 16 Oct 2015, 01:49 PM
Hi Devin,

This question is not directly related to Kendo UI Chart and is outside the scope of our standard support services, I would suggest using an Angular service to achieve the expected result. Have a basic example.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
John
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Devin
Top achievements
Rank 1
Share this question
or