Search code examples
cssreactjssvgfusioncharts

Fusioncharts timeseries transparent background

I am trying to make the background of a FusionCharts time-series chart transparent. I have tried the usual attributes that work with other chart types, and also hardcoded a background colour, but those chart attributes don't seem to apply to time-series charts. I have searched the documentation but cannot find anything useful for the time-series chart type. Is this possible, or with a CSS workaround? When I inspect the chart svg the opacity on all the elements within it are all undefined.

e.g. <rect transform="matrix(1,0,0,1,0,0)" height="150" width="403" fill="#ffffff" opacity="undefined"></rect>

chart: {
    bgColor: "#1d1b41",
    bgAlpha: "0",
    canvasBgAlpha: "0"
}

Sandbox: time-series chart

Solution

  • The transparency can be set only through CSS at the moment. Not sure if their time-series graphs have a bug that is preventing the transparency being set through the chart properties, or if it's simply not supported for this graph type. Regardless, the fix is to select the rect element within the time-series graph svg element and set the fill to be transparent:

    svg rect {
    fill: rgba(0, 0, 0, 0);
}