To replicate the elements of the chart, you can utilize plotly.js traces and text. By employing a scatter to position an array of markers, you can generate the grey arc first and then overlay the red arc above it. To compute the coordinates of each marker, center your axes at (0,0) and apply x=r*cos(theta) and y=r*sin(theta), where theta represents the angle in radians. This method helps in obtaining arrays of x and y values to delineate the desired sections of the red and grey arcs.
In order to achieve a circular chart resembling the one displayed, modify the x-axis and y-axis ranges to [-2,2], set the radius of the circular arcs as 0.9 with [0,0] as the center, assign size 10 to the markers of these arcs, establish the grey arc spanning from 210 to 85 degrees and the red arc ranging from 90 to -200 degrees by using the makeArr function introduced by mhodges in their solution here. Additionally, include a trace with a green marker but with null values to ensure its presence in the legend without appearing on the chart. Text traces can be applied for adding textual content around the center of the circular arcs.
For reference, you can access an example on codepen here:
// credit goes to mhodges: https://stackoverflow.com/a/40475362/5327068
function makeArr(startValue, stopValue, cardinality) {
var arr = [];
var step = (stopValue - startValue) / (cardinality - 1);
for (var i = 0; i < cardinality; i++) {
arr.push(startValue + (step * i));
}
return arr;
}
function getCircleCoords(r, center, degree_values) {
var center_x = center[0];
var center_y = center[1];
var x_coords = [];
var y_coords = [];
for (var i = 0; i < degree_values.length; i++) {
x_coords.push(center_x + (r * Math.cos(degree_values[i]*Math.PI/180)));
y_coords.push(center_y + (r * Math.sin(degree_values[i]*Math.PI/180)));
}
return [x_coords, y_coords];
}
var trace1 = {
x: [0],
y: [0.15],
text: ['1000'],
mode: 'text',
textfont: {
family: 'arial',
size: 28,
color: 'black'
},
showlegend: false
};
var trace2 = {
x: [0],
y: [-0.15],
text: ['kW/kg'],
mode: 'text',
textfont: {
family: 'arial',
size: 22,
color: 'grey'
},
showlegend: false
};
circleCoords = getCircleCoords(r=0.9, center=[0,0], radian_values=makeArr(90,-200,1000))
backgroundCircleCoords = getCircleCoords(r=0.9, center=[0,0], radian_values=makeArr(210,85,1000))
var trace3 = {
x: [null],
y: [null],
mode: 'markers',
marker: {color: 'green', size: 10},
name: 'Correcto funcionamiento'
};
var trace4 = {
x: backgroundCircleCoords[0],
y: backgroundCircleCoords[1],
mode: 'markers',
marker: {color: '#eeeeee', size: 10},
name: null,
showlegend: false
};
var trace5 = {
x: circleCoords[0],
y: circleCoords[1],
mode: 'markers',
marker: {color: 'red', size: 10},
name: 'Funcionamiento erroneo'
};
var layout = {
title:'Relacíon potencia peso',
xaxis: {
range: [-2, 2],
zeroline: false,
showgrid: false,
zeroline: false,
showline: false,
showticklabels: false
},
yaxis: {
range: [-2, 2],
showgrid: false,
zeroline: false,
showline: false,
showticklabels: false
},
width: 600,
height: 600,
legend: {
x: 0,
y: 0,
"orientation": "h"
}
};
var data = [trace1, trace2, trace3, trace4, trace5];
Plotly.newPlot('myDiv', data, layout);
https://i.stack.imgur.com/ARPiCm.png
EDIT: For smoother circle rendering, increase the number of markers used when drawing the circle:
circleCoords = getCircleCoords(r=0.9, center=[0,0], radian_values=makeArr(90,-200,5000))
backgroundCircleCoords = getCircleCoords(r=0.9, center=[0,0], radian_values=makeArr(210,85,5000))