How to center a funnel chart in a div

2 posts, 0 answers
  1. Nick
    Nick avatar
    9 posts
    Member since:
    Oct 2018

    Posted 06 Mar Link to this post

    I am trying to center a funnel chart in a div, but it doesn't work with my css. It would work well if I use other svg in a div. It looks like that the svg for the unnel chart always start from the point(0, 0) even though I set its margin in css. Much appreciate if any help.

    Following is my css

    div svg {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

  2. Missing user
    Missing user avatar

    Posted 08 Mar Link to this post

    Hi Nick,

    Generally speaking, in order to center a Kendo Chart inside a div, you should set text-align: center to the wrapper element of the chart's container and display: inline-block to the chart's div container:

    #chart-wrap {
     text-align: center;
    }
           
    #chart {
     display: inline-block;
    }

    I have created a working example in the following Dojo:

    https://dojo.telerik.com/iMOcuWUg

    If for some reason these additional styles are not working in your case, can you please update the Dojo with your custom configuration so that I can provide you with the respective CSS rules?

    I hope this helps.


    Regards,
    Teya
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top