Use of CSS

[JamesB2]

Is there documentation on the use of CSS Style Sheets with FusionCharts?

The little info I did find works, but I need additional info.  

For example, in my CSS I have the following:

.myChart {
    border: 10px solid blue;
}

How do you change the background color?  Other elements?  From the chart documentation (https://www.fusioncharts.com/dev/chart-attributes/bulb) there is no "border" attribute, but there is a borderColor; borderThickness; and borderAlpha.  How do I take the documented attributes and turn them into CSS?

Thanks!!

[Srishti Jaiswal]

Hi James,

FusionCharts supports various styling properties for most of it's chart elements like chart background, chart canvas, data plots, etc.

You can find the documentation regarding customizing the chart elements under "Configuring Your Charts" - "By Chart Component" section.

Documentation links:-

Chart border and background: https://www.fusioncharts.com/dev/chart-guide/chart-configurations/border-and-background

Chart canvas: https://www.fusioncharts.com/dev/chart-guide/chart-configurations/canvas

Hope this will help.

Thanks,

Srishti jaiswal

[JamesB2]

I've very familiar with the chart-configurations.  What this documentation doesn't show me is how to use CSS with FusionCharts.

For example, in CSS, to set the chart border, you use the following code:

.myChart {
    border: 10px solid blue;
}

but in the chart-configurations you use the following code:

{
    "chart": {
        "showBorder": "1",
        "borderColor": "#000080",
        "borderThickness": "10",
        "borderAlpha": "80"
    }
}

No where in the documentation that you provided does it show the CSS for "border:" and then what "10px, solid, blue" means.  Can you provide that documenation?

[Srishti Jaiswal]

Hi James,

CSS can be applied to the chart container but CSS has no role in styling the charts in FusionCharts. You need to use the different styling properties for the chart elements to apply the required style.

Documentation links:-
Chart border and background: https://www.fusioncharts.com/dev/chart-guide/chart-configurations/border-and-background
Chart canvas: https://www.fusioncharts.com/dev/chart-guide/chart-configurations/canvas

Hope this will help.

Thanks,

Srishti Jaiswal

[JamesB2]

What elements are able to be controlled via CSS?  Is there documentation?  

For example, if I wanted to control the background color of the chart, am I able to do so in CSS?

[Srishti Jaiswal]

Hi James,

CSS can only be applied to the chart container, i.e., the "div" or "span" DOM elements where you are rendering the chart. CSS has no role in styling any of the chart elements like the chart background. You need to use the "bgColor" chart attribute to apply background color to the chart and you cannot do that using CSS.

Please refer to this fiddle for the implementation: http://jsfiddle.net/t1hp5jaw/

Documentation link to modify the chart background color: https://www.fusioncharts.com/dev/chart-guide/chart-configurations/border-and-background#customize-chart-background

Hope this will help.

Thanks,

Srishti Jaiswal