Position graphs pies in website

plotly.js
1

I’m using plotly library to show graphs in website.
When I apply four pies side by side I am having a problem, intially I thinked it was necessary just use screen proportion between 0 to 1. But as can see in picture below, it functs with middle graphs just and not with closer graphics on the side of the screen.

plotly

The code used is below:

var number = {
              font: {
                size: 32,
                color: '#ddd',
                family: 'verdana'
              },
              showarrow: false,
              text: pieChartNumLoops[3],
              x: 0.875,
              y: 0.50
          };
          var text = {
              font: {
                size: 11,
                color: '#ddd',
                family: 'verdana'
              },
              showarrow: false,
              text: $translate.instant("example"),
              x: 0.875,
              y: 0.35
          };

In that case, if I modify screen resolution, reducing or increasing, the position of text and number is not change.

To solve it, I tryed to change position by screen resolution, but it was not efective. I did not find good math expression that can be used in all lengths. Below, it is code with math expression:

x: 0.895 - 0.001*(lengthScreen)

Does anyone can help me?
Any doubt I am available.

2

You might want to try to setup breakpoints (like discussed in Difficulty with annotations on paper with dynamic sized chart), or for your use-case why not try to use the somewhat new pie title attributes: