CODEWITHSUNDEEP
javascriptcssfusioncharts
code-8
code-8

Reputation: 58662

Set Round Corner to Chart Fusion Render Container

I have a chart using fusion chart to render

enter image description here

I'm trying to give it a little round corner to match with my current theme.

Here is what I have tried so far :

HTML

<div id="network-bw-usage-graph" class="r-panel"></div>

CSS

I've tried

.r-panel{
  width: 100%;
  height: 100%;
  border-radius: 10px !important;
}

JS

<script type="text/javascript">

    var data = {
        "chart": {
            "caption": "VSE Bandwidth Utilization",
            "subCaption": "Downlink Vs. Uplink",
            "xAxisName": "Day",
            "yAxisName": "Bandwidth Utilization (GB)",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "baseFontColor": "#333333",
            "baseFont": "Helvetica Neue,Arial",
            "subcaptionFontBold": "0",
            "paletteColors": "#6baa01,#008ee4",
            "usePlotGradientColor": "0",
            "bgColor": "#ffffff",
            "showBorder": "0",
            "showPlotBorder": "0",
            "showValues": "0",
            "showShadow": "0",
            "showAlternateHGridColor": "0",
            "showCanvasBorder": "0",
            "showXAxisLine": "1",
            "xAxisLineThickness": "1",
            "xAxisLineColor": "#999999",
            "canvasBgColor": "#ffffff",
            "divlineAlpha": "100",
            "divlineColor": "#999999",
            "divlineThickness": "1",
            "divLineDashed": "1",
            "divLineDashLen": "1",
            "divLineGapLen": "1",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "toolTipColor": "#ffffff",
            "toolTipBorderThickness": "0",
            "toolTipBgColor": "#000000",
            "toolTipBgAlpha": "80",
            "toolTipBorderRadius": "2",
            "toolTipPadding": "5"
        },
        "categories": [
        {
            "category": [
            {
                "label": "Mon"
            },
            {
                "label": "Tue"
            },
            {
                "label": "Wed"
            },
            {
                "label": "Thu"
            },
            {
                "label": "Fri"
            },
            {
                "label": "Sat"
            },
            {
                "label": "Sun"
            }
            ]
        }
        ],
        "dataset": [
        {
            "seriesname": "Downlink",
            "data": [
            {
                "value": "45123"
            },
            {
                "value": "42233"
            },
            {
                "value": "44507"
            },
            {
                "value": "39110"
            },
            {
                "value": "44829"
            },
            {
                "value": "47503"
            },
            {
                "value": "40202"
            }
            ]
        },
        {
            "seriesname": "Uplink",
            "data": [
            {
                "value": "11400"
            },
            {
                "value": "12800"
            },
            {
                "value": "17800"
            },
            {
                "value": "10400"
            },
            {
                "value": "11800"
            },
            {
                "value": "13100"
            },
            {
                "value": "20800"
            }
            ]
        }
        ]
    };
    var graph = new FusionCharts({

        "type": "mssplinearea",
        // "type": "msline",
        "renderAt": "network-bw-usage-graph",
        "width": "100%",
        "dataFormat": "json",
        "dataSource": data

    });


    FusionCharts.ready(function() {
        graph.render();
    });
</script>

Any hints ?

Upvotes: 1

Views: 857

Answers (1)

adiga
adiga

Reputation: 35222

I had a similar problem with showing buttons on either side of the chart. I can suggest a workaround. You create a container div and put the chart-container div inside this. Then give the border, background color to the parent container div. Increase the height and width a few px or percent more than the chart div.

<div class="container">
  <div id="chart-container">FusionCharts will render here</div>
</div>

CSS:

.container {
 width: 455px;
 height: 455px;
 border-radius: 10px;
 background-color: white;
}

I have created a fiddle: http://jsfiddle.net/adigas/6swLnbbq/2/

Upvotes: 1

Related Questions