c3js svg not loading css

[juanibarral]

Hi,

I've been trying to create an image URI using your library from a c3js graph (https://c3js.org/) but the css style is not being loaded. Is there a way to add the whole css to the generator?

Thanks

Here is part of my code:

var element = d3.select("#my_chart").node();
var svg_chart_doc = element.getElementsByTagName("svg")[0];
savesvg.svgAsPngUri(svg_chart_doc, {
   css : cssstring ?
}, function(uri) {
    sendUriToServer(uri)
});

[Braintelligence]

Same problem. Any ideas?

Here's an example jsfiddle: https://jsfiddle.net/bgz4Lnys/

[Braintelligence]

@juanibarral It seems you need to play a lot with selectorRemap...

I'm not sure how to correctly include all the styles, though. My current option looks like this: selectorRemap: s => s.replace(/\.c3((-)?[\w.]*)*/g, '')

I think it's wrong, though, because the CSS styles aren't only applied on a root level, but rather even on child nodes. I don't know how to specify a selectorremap in a proper way.

@exupero Any ideas? =(

[exupero]

Sorry for the delay. Your selector remap seems close. I think all you need to do is remove any parts of the selector that refer to DOM elements at or above the SVG level, which in this case seems to be .c3, so I think this selectorRemap is closer to what you want:

s => s.replace(/\.c3 /g, '')

Unfortunately, that only gets your example a bit closer to rendering properly, and not the whole way. The axes now look right, but the graph lines don't show up, and I haven't been able to figure out why. Even just using prepareSvg to append the SVG source to the page doesn't show the paths or circles. Maybe it has to do with the clipping paths or some transform oddity?

I hope that helps. Let me know if you need anything else.

[Braintelligence]

Actually, yeah, I ditched c3js altogether because I ran into features that I needed and c3js didn't provide, so I switched to plotly.js

I can't manage to get saveSvgAsPng to work with plotly.js at all. If you could provide a working example I'd be really happy 👍 . Sorry for derailing this a bit, but maybe it could help towards this problem here as well.

[Braintelligence]

I found out how to use plotly to generate svg and png; sadly png doesn't work properly with Edge yet. (And propably will never work with IE.) Now I'm wondering how I could provide saveSvgAsPng with an SVG promise so it would return a PNG... any ideas?

[exupero]

Can you be more specific about what you mean by "provide saveSvgAsPng with an SVG promise so it would return a PNG"? I'm not sure I understand the use case.

[Braintelligence]

See this function for reference: https://plot.ly/javascript/plotlyjs-function-reference/#plotlytoimage

Is there any way to turn the returned promise into a PNG with this project?

[chrismclarke]

Sorry for the delay. Your selector remap seems close. I think all you need to do is remove any parts of the selector that refer to DOM elements at or above the SVG level, which in this case seems to be .c3, so I think this selectorRemap is closer to what you want:

s => s.replace(/\.c3 /g, '')

Unfortunately, that only gets your example a bit closer to rendering properly, and not the whole way. The axes now look right, but the graph lines don't show up, and I haven't been able to figure out why. Even just using prepareSvg to append the SVG source to the page doesn't show the paths or circles. Maybe it has to do with the clipping paths or some transform oddity?

I hope that helps. Let me know if you need anything else.

Just tried using this with c3 and working great for me!