Vaadin Charts - can't conver chart SVG to PNG

Flow
1

hello,

We want to create chart on our and save it as PNG file. we generate the chart on Java server side.
According to your documentation(https://vaadin.com/docs/-/part/charts/java-api/charts-advanced.html), there is no such option, but there is an option to convert the chart to SVG file and then use another SVG tool for our propose.

We use your SVGGenerator to get SVG string of the chart, and we try to convert it to PNG file using the Batik tool (one of the tools you mention in your documentation.).
The conversion is finished with no error, but we get an empty PNG file.
When we try to convert another SVG using the Batik tool it works fine. When we open the chart SVG in a browser it works fine.

Can you please assist?

attached is the generad SVG chart, and the PNG we get when we try to convert the SVG.
29513.png
29514.svg

2

Hi,

One thing you can always do with SVG, since it’s XML: Edit the file (for example by removing elements) and test the output until you get
something
 out. Isolate the element(s) that are causing problems. Then you can create a transformation that fixes your file. All the blank SVG renders I’ve seen have been caused by something quite small being off.

Good luck!
-Olli

3

I’m having the same issue where the outputted file is blank and can’t figure it out either. I’ve attached the SVG file generated with Vaadin 8.0.7 and Charts 4.0.0.

I basically saved the following to the file chart.svg

String svg = SVGGenerator.getInstance().generate(chart.getConfiguration());

My Code to convert to jpg with Batik is:

public static void main(String args) throws Exception
{
    InputStream inputStream = new FileInputStream(new File("C:\\temp\\chart.svg"));
   
    JPEGTranscoder t = new JPEGTranscoder();
    t.addTranscodingHint(JPEGTranscoder.KEY_QUALITY, new Float(.8));

    TranscoderInput input = new TranscoderInput(inputStream);

    OutputStream outputStream = new FileOutputStream("C:\\temp\\chart.jpg");
    TranscoderOutput output = new TranscoderOutput(outputStream);

    t.transcode(input, output);

    outputStream.flush();
    outputStream.close();
    System.exit(0);
}

It looks like the part that’s causing the issue in the SVG file is:

<g class="highcharts-tooltip" style="cursor:default;padding:0;pointer-events:none;white-space:nowrap;" transform="translate(0,-9000000000)">
    <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"  stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"/>
    <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"  stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"/>
    <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"  stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"/>
    <path fill="#FFFFFF" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"/>
    <text x="8" style="font-size:12px;color:#333333;fill:#333333;" y="20"/>
</g>

*** UPDATE: I found that if I added the following code before the SVGGenerator then it fixed the issue:

configuration.getTooltip().setEnabled(false);

In other words something with the tooltip is causing the issue…

34214.svg

4

This issue was reported as https://github.com/vaadin/framework/issues/9719 and https://github.com/vaadin/charts/issues/351

As mentioned above one workaround is to disable the tooltip.

Or as explained in the github issue another workaround is to replace translate(0,-9000000000) with translate(0,-9999) in the generated SVG