ZK Charts Flexibility - Responsiveness

asked 2015-08-06 08:10:45 +0800

ifmis gravatar image ifmis
1 2


I'm a newbie in ZK especially in ZK Charts. In my current application, I want to create a dashboard with many components such as charts, panels, etc. On dashboard, the responsiveness is the most crucial point like Flatty template (wrapbootstrap.com/preview/WB0P6NR1N).

So the big challenge is that I can't use the percentage on ZK charts or FLEX attribute (vflex, hflex).

Please anyone with a solution, I will really appreciate.


Emma ~ IFMIS.

delete flag offensive retag edit


//page.zul// <panel hflex="1" vflex="1"><panelchildren> <hlayout hflex="6" vflex="1"> <div sclass="chart" hflex="4" vflex="1"> <include src="chart.zul" /> </div></hlayout></panelchildren></panel> //chart.zul//<div hflex="1"><charts id="chart" type="column" hflex="1" /></div>

ifmis ( 2015-08-06 14:00:22 +0800 )edit

3 Answers

Sort by ยป oldest newest most voted

answered 2015-08-06 10:31:08 +0800

Darksu gravatar image Darksu
1991 1 4

Hello ifmis,

As mentioned at the following post, you can accomplish your task by fitting the chart automatically into the surrounding container (i.e. a div)


If you need more assistance, please let me know.

Best Regards,


link publish delete flag offensive edit



answered 2015-08-10 06:38:59 +0800

ifmis gravatar image ifmis
1 2

Hello Darksu,

Thank you for your good and helping answer to my question. I tried using below code, but I still have a problem. The chart is very small so that I can read its contents.

<panel hflex="1" vflex="1">
         <hlayout hflex="6" vflex="1"> 
            <div sclass="chart" hflex="4" vflex="1"> 
                <include src="chart.zul" />

<div hflex="1">
     <charts id="chart" type="column" hflex="1" />

Your help is very welcome.

Thank you.


link publish delete flag offensive edit


Any one with a solution or comment please???

ifmis ( 2015-08-19 07:05:46 +0800 )edit

Hello, may I ask what version of zk and zkcharts are you using?

christopherszu ( 2015-09-11 02:34:21 +0800 )edit

Hello, I am using zk 7.0.0 and zk charts Thanks

ifmis ( 2015-09-11 07:02:03 +0800 )edit

Can you record a video for us to check what's wrong in your environment? the tool - https://www.techsmith.com/jing.html

jumperchen ( 2015-09-15 09:18:27 +0800 )edit

Video shared at http://www.screencast.com/t/A8Se3uTVpYm

ifmis ( 2015-09-15 13:47:43 +0800 )edit

answered 2015-09-16 15:05:31 +0800

ifmis gravatar image ifmis
1 2

Finally I got the simple answer: Charts support Horizontal Flexibility as other components:


<div hflex="1">
     <charts id="chart" type="column" hflex="max" />


  1. min hflex is not supported
  2. hflex="1" seems to work but with difficulties
  3. As you see above my code hflex="max" works perfectly as I wanted.

Big up to ZK Team for this feature.

Emma ~ IFMIS

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2015-08-06 08:10:45 +0800

Seen: 57 times

Last updated: Sep 16 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More