Pie Chart's background doesnt change

[JustEndy]

Description

Hi everyone!
I generated a Pie Chart, but I can't change the PaperBGColor of it anyhow.

Repro steps

1. Using mypiechart.Show(), it shows it in HTML as transparent..
   but if I save it down with mypiechart.SavePNG(path) then background becomes white.

2. I tried to Initialise a new Layout and add that to it, but same result.

           //I generate a Pie Chart in F#
            var pieChart = GG.PieStyled(values, labels);

            var legend = Legend.init();

            var layout = new Layout();
            layout.SetValue("legend", legend);
            layout.SetValue("title", "PiePie Chart");
            layout.SetValue("PaperBGColor", Plotly.NET.Color.fromARGB(0, 100, 255, 50));
            layout.SetValue("PlotBGColor", Plotly.NET.Color.fromARGB(0, 100, 255, 50));

            pieChart.WithLayout(layout);

            pieChart.SavePNG(name);

F# part of the code

namespace GraphGenerator

open Plotly.NET
open FSharp.Core
open Plotly.NET.ImageExport

module GG =
    [<CompiledName("PieStyled")>]
    let pieStyled (values, labels) =
        Chart.Pie(
            values = values,
            Labels = labels,
            SectionColors = [ Color.fromKeyword Aqua; Color.fromKeyword Salmon; Color.fromKeyword Tan ],
            SectionOutlineColor = Color.fromKeyword Black,
            SectionOutlineWidth = 2.,
            MultiText = labels,
            MultiTextPosition =
                [ StyleParam.TextPosition.Outside
                  StyleParam.TextPosition.Outside
                  StyleParam.TextPosition.Outside ],
            Rotation = 45.,
            MultiPull = [ 0.; 0.3; 0. ]
        )

Expected behavior

When I look at the saved down png image, I see a transparent Pie Chart.

Actual behavior

I see a Pie Chart with white background.

Related information

• WIndows 11

[bvenn]

Have you tried setting the alpha channel to 255? I think the it's opacity and not transparency so you have to set it high.

[kMutagene]

Have you tried setting the alpha channel to 255? I think the it's opacity and not transparency so you have to set it high.

I think setting the alpha channel to 0 should trigger transparency correctly. high alpha should mean high opacity and therefore a color should be visible.

@Endferoma i suspect there is something happening in your GG.PieStyled(values, labels) custom function that creates the pie chart, because i cannot reproduce this using a simple pie chart:

open Plotly.NET
open Plotly.NET.ImageExport

let pie = Chart.Pie(values = [4500; 2500; 1053; 5000], Labels = ["Oxygen"; "Hydrogen"; "CarbonDioxide"; "Nitrogen"])

let layout = 
    Layout.init(
        PaperBGColor = (Color.fromARGB 0 0 0 0),
        PlotBGColor = (Color.fromARGB 0 0 0 0)
    )

pie
|> Chart.withLayout(layout)
|> Chart.savePNG(@"some path")

yields this image:

Also note that the correct plotly attributes on dynamic objects are called paper_bgcolor
and plot_bgcolor. Also, if you use dynamic object style, the implicit JSON mapping of the color to the correct string is not done as well, so you have to put the color code there, either by directly setting it or by transforming the Color object

Which then also works fine for me:

open Plotly.NET
open Plotly.NET.ImageExport

let pie = Chart.Pie(values = [4500; 2500; 1053; 5000], Labels = ["Oxygen"; "Hydrogen"; "CarbonDioxide"; "Nitrogen"])

let layout = Layout.init()

layout.SetValue("paper_bgcolor", "rgba(0,0,0,0)")
layout.SetValue("plot_bgcolor","rgba(0,0,0,0)")

pie
|> Chart.withLayout(layout)
|> Chart.savePNG(@"some path")

So I would suspect you are either setting colors in your generator function or use the wrong names for setting the properties directly.

[kMutagene]

If you want to read more about the API layers and how to use them, have a look at our paper where we go quite a bit into detail: https://f1000research.com/articles/11-1094/v1

[kMutagene]

Closing this, feel free to reopen if the mentioned fixes do not work for you @Endferoma

[JustEndy]

Oh wonderful.. thank you really much @kMutagene ! ^-^
It's really infuriating when you are stuck with something for hours.. and have no clue what else can be the issue...
I understood thanks to you my confusion.. I was trying to change a variable that is named differently.

[JustEndy]

I also added the F# part of the coding so everything is more visible for others to learn

[kMutagene]

Glad i could help @Endferoma, i know that feeling very well :D

In general, please note that I recommend to use the DynamicObj API (the API layer that exposes SetValue, or the ? operator) only if there are either no type-safe bindings in the other API layers or if you know the plotly json schema well.

In your case, everything had a type safe abstraction (see my first example above), and you should not need to use the low-level API. I won't force you to not use it, but the things that happened to you will not happen in the higher abstraction layers of the API ;)