Dynamically change the chart style

Posted by: yifan_zhang on 14 September 2017, 2:57 am EST

Please login to follow topic

yifan_zhang
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST
I have two questions related with changing the chart style dynamically:

I tried with using jquery to directly modify the chart’s css style in runtime, however whenever the chart gets update all the styles are reset to default again, so is there a way of having the dynamically changed style reapply every time or remain?

I noticed that some chart elements have in-built style profile such as the headerStyle for chart’s header and that could somehow fix the above issue. However, the problem is it only applies to very few styles such as “font-family”, “font-style” and “font-weight”, but not “font-size” or “fill” color, etc (See the example in the attachment where font-size is not working). So is this a known issue that those property settings are limited?

Thanks in advance.

2017/03/FlexChart-label.zip
yifan_zhang
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Actually the font-weight does not working in the headerStyle as well.
manish-gupta1
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Hi,

Could you please share how the chart is getting updated?

Regarding styling of header of FlexChart:

We are able to replicate the issue at our end and looks like a bug. Hence, this issue has been escalated to the concerned team for further investigation with tracking id 250312. We will let you know as soon as we get any update.

In the meantime, please update these properties using style.

For reference, please see the attached sample that implements the same.

Thanks,

Manish Kumar Gupta

2017/03/FlexChart-label_update.zip
yifan_zhang
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Hi Manish,

Thanks for the info and sorry about the late reply. So basically I put the style setting in the same way as you did (set fill/fontSize after endUpdate()) just without the setTimeout. Therefore, wijmo kinds of reset all the style I set because the deferUpdate been called after the endUpdate(). Now I put all the style setting in the rendered handler and that works fine.

However, another issue is raised: the style was applied after the chart was rendered, thus the layout was not updated (text may not be aligned or will be cut off, see the chart title in the attachment). So is there a way of setting style, but then refreshing the chart to correctly apply that style and fix the layout? Thanks.
manish-gupta1
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Hi,

For this, you need to set styles in CSS.

For your reference, please see the attached sample for the same.

Thanks,

Manish Kumar Gupta

2017/03/FlexChart-label_update1.1.zip
yifan_zhang
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Hi Manish,

Thanks again for the advice. Modifying the css stylesheet works fine for the chart title and chart axis labels after refreshing the chart, however, it is not working for the legend labels (see the attachment). It seems the legend label’s font size is not considered when rendering the chart. Any suggestion on that? Thank you.
manish-gupta1
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Hi,

We are able to replicate the issue at our end. We have escalated this issue to the concerned team for further investigation with tracking id 251361. We will let you know as soon as we get any update.

Thanks,

Manish Kumar Gupta
yifan_zhang
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Thank you Manish, I’m looking forward to the fix. I’ll check back in a few days.
yifan_zhang
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Hi Manish,

I also found that the font-size style not working for y-axis labels (it works fine for x-axis labels). So I think y-axis label font is not used for calculating the chart layout as well, see the attachment. Can you confirm this and escalate it for a fix? Thanks.
manish-gupta1
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Hi,

Thanks for additional research and sharing information here.

We have passed on information to the concerned team, we will let you know as soon as we get any update on this.

Thanks,

Manish Kumar Gupta
yifan_zhang
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Any updates on this issue? The flexibility of adjusting the chart style is pretty important for us, and the incorrect positioned y-axis labels as well as the legend labels just makes the chart ugly. Thanks.
manish-gupta1
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Hello,

This issue has been fixed in latest prerelease build 5.20171.293 which can be downloaded from my-account page for licensed customer. This build be public in the next week.

For your reference, please see the attached sample that implements the same. Screenshot describes how to download build.

Thanks,

Manish Kumar Gupta

2017/05/FlexChart-label_update1.1.zip
yifan_zhang
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Hi Manish,

Thanks for the follow-up. I have tested the new version and it fixed the issue of the legend text. I really appreciate that. However, I found the style for axis labels still can not be specified separately using “.wj-flexchart .wj-axis-y .wj-label”, which will cause the overlapping for axis labels (See in the attachment). Weird thing is that specifying with “.wj-flexchart .wj-label” works fine but we want separate style managed for x, y axis labels respectively. I mentioned this issue in post “http://wijmo.com/topic/imperfect-label-alignment-for-rotated-labels/” as well but that was for x-axis label. So can you kindly help me resolve this issue? Thank you.

2017/05/Axis-label.zip
manish-gupta1
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Hello,

Thanks for reporting this issue. We are able to replicate the issue at our end and it looks like a bug. Hence, this issue has been escalated to the concerned team with same tracking id 251361. We will notify you as soon as we get any update on this issue.

Thanks,

Manish Kumar Gupta
yifan_zhang
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Just checking any updates on this issue? Thanks.
manish-gupta1
- Post Options:
- Link
  Copy
Posted 14 September 2017, 2:57 am EST

Hello,

We are sorry, currently, this issue is still with our development team.

We have requested for an update. We will let you know as soon as we get any update on this issue.

Thanks,

Manish Kumar Gupta
manish.gupta
- Post Options:
- Link
  Copy
Posted 19 January 2018, 10:54 pm EST

Hi,

This issue has been verified as fixed with build 5.20173.403. You may get it from the website under MyAccount section.

~Manish

Please login to reply to thread

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

ComponentOne

Forums for all current editions of the ComponentOne .NET UI control product line, including ComponentOne Studio and ComponentOne Studio for Xamarin.
ActiveReports

Forums for all versions of ActiveReports and ActiveReports Server
Spread

Forums for all current versions of Spread .NET spreadsheets, SpreadJS JavaScript spreadsheets, and SpreadCOM spreadsheets.
Wijmo

Forums for all Wijmo products, including Wijmo Core, FinancialChart, FlexSheet, MultiRow, OLAP, and ReportViewer
- General Discussion
Document Solutions

Forums for all Document Solutions products, including Document Solutions for PDF, Word, Excel (.NET and Java), and Imaging.

Dynamically change the chart style

Need extra support?

Forum Channels

ComponentOne

ActiveReports

Spread

Wijmo

Document Solutions