How to make a zingchart completely responsive inside a container without scroll?

Question

In my web page, I am showing the zing charts in different containers. I dynamically set the height and width of the containers. The width of the container would be either 48% or 96% with respect to the width of the page while the height comes from the backend (customized by the user).

Inside the container, I am showing the header and breadcrumb which takes some amount of height of the container (around 50px). I need to use the rest of the area to plot the zing chart.

So I tried two methods:

Setting the height and width as 100% while rendering the zing chart. In this scenario, I either need to set scroll for the container or for the zing chart in order to make my chart proper.Scroll shouldn't be present. So I had to drop this.

Another method that I tried was subtracting the height of the container with 50px(As stated above in the 2nd paragraph 2nd line, it is the space taken by the header and breadcrumb) and set that height for the chart while rendering. This seems to be failing in certain scenarios in the sense the chart seems to be too small. I am sharing the code snippet and the scenario where it fails.

This is the configuration I am using to set for a vertical bar zing chart.

var vBarConfig = {
                "type": "vbar"
                , "legend": {
                    toggleAction: 'none'
                    , "marker": {
                        "cursor": "hand"
                    }
                    , "item": {
                        "cursor": "hand"
                    }
                    , "border-color": "none"
                    , "align": "center"
                    , "vertical-align": "bottom"  
                    , "max-items": 4
                    , "overflow": "page"
                    , "page-on": {
                        "background-color": "black"
                        , "border-width": 1
                        , "border-color": "black"
                    }
                    , "page-off": {
                        "background-color": "#ffe6e6"
                        , "border-width": 1
                        , "border-color": "black"
                    }
                    , "page-status": {
                        "font-color": "black"
                        , "font-size": 11
                        , "font-family": "Georgia"
                        , "background-color": "#ffe6e6"
                    , }
                }
                , "plotarea": {
                    "margin-bottom": "35%"
                    , "margin-top": "15%"
                    , "border-top": "1px solid grey"
                    , "border-right": "1px solid grey"

                }
                , "scale-x": {
                    "labels": categoryVbarName
                    , "auto-fit": true
                    , "line-width": 1
                    , "items-overlap": true
                    , "item": {
                        "angle": 0
                        , "wrap-text": true
                    }
                }
                , "scale-y": {
                    "values": scaleValue
                    , "ref-value": refMarkerPosition
                    , "ref-line": {
                        "visible": true
                        , "line-color": refMarkerColor
                        , "line-width": refMarkerWidth
                        , "line-style": "solid"
                        , "items-overlap": true
                    }
                    , "guide": {
                        "line-style": "solid"
                    }
                }
                , "plot": {
                    "tooltip": {
                        "rules": $scope.tooltipVbarRules
                    }
                    , "value-box": {
                        "text": "%vt "
                        , "visible": true
                        , "font-color": "black"
                        , "font-size": "10px"
                        , "decimals": 2
                        , "angle": -90
                        , "placement": "middle"
                    }
                    , "animation": {
                        "effect": "ANIMATION_SLIDE_BOTTOM"
                        , "speed": "2000"
                    }
                }
                , "series": vbarData
            }
/* Getting the height of the container */
 var height=$('#'+contentName+'TH').height();
            height=height-50;

               zingchart.render({
                id: contentName
                , data: vBarConfig
                , height:height
                , width: '100%'
                , defaults: commonSettings
            });

Is there some other way I could make the zing chart dynamic in my container scenario? or am I doing something wrong? Example Scenario: I am setting the height for the container before calling the rendering function. As I have stated am already using the 100% width and 100% height. The container in which the chart is going to be generated has 48% width and height of '300px'. The title for the chart and the breadcrumb takes '50px' of the height of the container. Now we are left with '250px' of height to plot our chart. When we set the rendering value of height as '100%' for the chart it takes the '100%' of '300px'. This should not happen because it will create scrolling for the container. I want the chart to be constructed within the 250px space. (No Scroll)

How to make a zingchart completely responsive inside a container without scroll?

Answers (1)

Related Questions