Plotly js gauge/pie chart data order

plotly.js
1

Hi,

I am having a problems with my data order when trying to create a gauge chart (pie chart).
I have the following script:

var data = [{ type: ‘category’,
x: [0], y:[0],
marker: {size: 28, color:‘850000’},
showlegend: false,
name: ‘speed’,
text: level,
hoverinfo: ‘text+name’},
{ values: [5,4,3,1,2, 15],
rotation: 90,

text: [‘ML5’, ‘ML4’, ‘ML3’, ‘ML2’,
‘ML1’, ‘’],
textinfo: ‘text’,
textposition:‘inside’,
marker: {colors:[‘rgba(14, 127, 0, .5)’, ‘rgba(110, 154, 22, .5)’,
‘rgba(170, 202, 42, .5)’, ‘rgba(202, 209, 95, .5)’,
‘rgba(210, 206, 145, .5)’,
‘rgba(255, 255, 255, 0)’]},
labels: [‘4.5-5’, ‘3.5-4.49’, ‘2.5-3.49’, ‘1.5-2.49’, ‘1-1.49’],
hoverinfo: ‘label’,
hole: .5,
type: ‘pie’,
showlegend: false
}];

var layout = {
shapes:[{
type: ‘path’,
path: path,
fillcolor: ‘850000’,
line: {
color: ‘850000’
}
}],
title: ‘Maturity Total Score 1-5’,
height: 500,
width: 600,
xaxis: {type:‘category’,zeroline:false, showticklabels:false,
showgrid: false, range: [-1, 1]},
yaxis: {type:‘category’,zeroline:false, showticklabels:false,
showgrid: false, range: [-1, 1]}
};

Plotly.newPlot(‘myDiv’, data, layout);

When I look at the gauge generated it switches M1 and M2 because I think it automatically sorts data. However I want it to appear the same sequence as it is 2,1,3,4,5 not 1,2,3,4,5. It behaves the same when I do full pie chart. Is there any workaround available?

See the png attached
newplot

Thanks!
Anush

2

Can you share the path string you used? This would make your snippet reproducible and help us help you immensely. Thanks.

3

https://jsfiddle.net/b98tj88j/3/

Please see the full script


//Enter a level between 1 and 5
var level = 4.5;

// Trig to calc meter point
var degrees = 180-(level-1)*45;
alert(degrees);
     radius = .5;
var radians = degrees * Math.PI / 180;
var x = radius * Math.cos(radians);
var y = radius * Math.sin(radians);

// Path: may have to change to create a better triangle
var mainPath = 'M -.0 -0.035 L .0 0.035 L ',
     pathX = String(x),
     space = ' ',
     pathY = String(y),
     pathEnd = ' Z';
var path = mainPath.concat(pathX,space,pathY,pathEnd);

var data = [{ type: 'category',
   x: [0], y:[0],
    marker: {size: 28, color:'850000'},
    showlegend: false,
    name: 'speed',
    text: level,
    hoverinfo: 'text+name'},
  { values: [5,4,3,1,2, 15],
  rotation: 90,
  
  text: ['ML5', 'ML4', 'ML3', 'ML2',
            'ML1',  ''],
  textinfo: 'text',
  textposition:'inside',      
  marker: {colors:['rgba(14, 127, 0, .5)', 'rgba(110, 154, 22, .5)',
                         'rgba(170, 202, 42, .5)', 'rgba(202, 209, 95, .5)',
                         'rgba(210, 206, 145, .5)', 
                         'rgba(255, 255, 255, 0)']},
  labels: ['4.5-5', '3.5-4.49', '2.5-3.49', '1.5-2.49', '1-1.49'],
  hoverinfo: 'label',
  hole: .5,
  type: 'pie',
  showlegend: false
}];

var layout = {
  shapes:[{
      type: 'path',
      path: path,
      fillcolor: '850000',
      line: {
        color: '850000'
      }
    }],
  title: 'Maturity Total Score 1-5',
  height: 500,
  width: 600,
  xaxis: {type:'category',zeroline:false, showticklabels:false,
             showgrid: false, range: [-1, 1]},
  yaxis: {type:'category',zeroline:false, showticklabels:false,
             showgrid: false, range: [-1, 1]}
};

Plotly.newPlot('myDiv', data, layout);
</script>
4

Yes, we do automatically sort the slices, but you can use sort: false to disable this.

1 Like
5

Hi! This thread is old but the problem remains:
by unsorted unequal segments is the rotation aproximately 29.5
(empirically found),not 90. By equal unsorted segments
is the rotation aproximately 54.
Is there a formula to calculate the rotation by unequal
unsorted segments/sectors? Thank you in advance!