JamesB2

Use of CSS

Recommended Posts

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!!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now