[solved] Axis setting in Polar charts

plotly.js
1

Hi there,

I encounter difficulties to setup axis parameter in a polar chart.

Here my configuration :

var trace1 = {
  r: [7.67417906914, 6.69995353301, 5.73431038813, 6.0442759153, 4.31294306609],
  theta: [112.834944178, -114.386479929, 90, 95, -128.246728907],
  //mode: "markers",
  name: "Trial 1",
  marker: {
    color: "rgb(102,166,30)",
    size: 110,
    line: {color: "rgb(255,255,255)"},
    opacity: 0.7
  },
  type: "barpolar",
  barmode: "overlay", 
  width: 20
};

example = [trace1];

var layout = {
  title: "Example",
  titlefont: {family: 'verdana', size: 24, color: '#ffffff'},  
  paper_bgcolor: '#2a2a2a',
  //plot_bgcolor: "rgb(255,255,255)",
  //hoverlabel: {bordercolor: '#ffffff'},
  angularaxis: {color: '#ffffff'}
  //angularaxis: {color: '#ffffff', title: 'speed', rotation: 270, side: 'counterclockwise', titlefont: {family: 'verdana', size: 18, color: '#ffffff'}},
};

Plotly.newPlot('exampleContainer', example, layout);

=> I’m unable to setup any parameter of the theta axis (even color don’t works). Is “angularaxis” isn’t the right call for the theta axis ?
=> Please, do you see any mistake in my code ?

Thanks.
MĂ©ric

2

Try:

var layout = {
  title: "Example",
  titlefont: {family: 'verdana', size: 24, color: '#ffffff'},  
  paper_bgcolor: '#2a2a2a',
  //plot_bgcolor: "rgb(255,255,255)",
  //hoverlabel: {bordercolor: '#ffffff'},

  polar: {
      angularaxis: {color: '#ffffff'}
  //angularaxis: {color: '#ffffff', title: 'speed', rotation: 270, side: 'counterclockwise', titlefont: {family: 'verdana', size: 18, color: '#ffffff'}},
  }
};

Plotly.newPlot('exampleContainer', example, layout);
3

Two full days of frustration and failure solved in a few minutes.
Etienne, thank you. :muscle:

=> By the way, do you know what is wrong in my plot_bgcolor ?

4

OK, in the same way :

polar: {
          angularaxis: {color: '#ffffff'}
      //angularaxis: {color: '#ffffff', title: 'speed', rotation: 270, side: 'counterclockwise', titlefont: {family: 'verdana', size: 18, color: '#ffffff'}},
    bgcolor: "rgb(255,255,255)"
      }
    };

works fine.
Thanks again, Etienne.

1 Like