Chart theme not working in angularJs

[John]

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

[Iliana Dyankova]

Hi John,

You should use string literal to set the theme: 

<div kendo-chart class="chart"
    k-theme="'Bootstrap'"
    <!--...-->
>
</div>

Regards,
Iliana Nikolova
Telerik

 

 

[Devin]

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.

[Iliana Dyankova]

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

 

 

[Devin]

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.

[Iliana Dyankova]

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