Using Charts within Tabbed Content Boxes

  • Resolved btrivedi

    (@btrivedi)


    10 years, 10 months ago

    Hi,

    I’m using your charting plug in (thanks for it – it’s super easy to use!) and am having an issue. When I use the shortcodes in a regular page format (no other coding) it works just fine. I can put the charts in columns, or full width, etc.

    However, when I try to use them in the tabbed content shortcode that comes with the theme I am using (Elegant Themes – Trim Theme) plus your chart codes it screws up the height. Essentially, it squishes the charts. I can still use them within columns, etc. and the width works but the height, no matter what I try, won’t work. I’ve included my code below. Any help? (Code abbreviated)

    [tab][one_third][wp_charts title=”mydough” type=”doughnut” align=”alignleft” margin=”5px 5px” data=”30,10,55,25″ colors=”7AB800,#008FBE,#F78000,#929496″ width=”100%” height=”auto”][/one_third][one_third][wp_charts title=”mydough2″ type=”doughnut” align=”alignleft” margin=”5px 5px” data=”30,10,55,25″ colors=”7AB800,#008FBE,#F78000,#929496″ width=”100%” height=”auto”][/one_third][one_third_last][wp_charts title=”mydough3″ type=”doughnut” align=”alignleft” margin=”5px 5px” data=”30,10,55,25″ colors=”7AB800,#008FBE,#F78000,#929496″ width=”100%” height=”auto”][/one_third_last][/tab] [tab]Content goes here[/tab]

    (Side note – changing height from auto to 100% doesn’t fix it).

    Thanks!

    https://www.ads-software.com/plugins/wp-charts/

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi btrivedi

    I assume this will have to do with the canvas element being rendered inside a hidden div, depending on how they’ve creating their tabbing plugin, its probably hidden with jQuery’s .hide() which sets a css property of display:none which stops canvas rendering, at this stage I’m not quite sure how I would fix this for you, and its a little bit of an edge case for me to tackle, I’ll definitely keep it in mind as I develop the plugin further, though the only way I can imagine this would work is to tie render and destroy methods into the tab events which you’d need to likely do on a case by case basis.

    Sorry I can’t be of more assistance.

    Thanks for checking out WP Charts.

    Kind Regards

    Paul

    Thread Starter btrivedi

    (@btrivedi)

    Hi Paul,

    Thank you so much for the pointer! That’s a pretty good hypothesis and I’ll look into it. I’ll keep you posted!

    awesome, I’m sure you wont be the only person who faces this challenge.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Using Charts within Tabbed Content Boxes’ is closed to new replies.