Search code examples
javascriptchartsplotlyplotly.jsdonut-chart

How to reduce space between title and donut chart in plotly js?

My current code:

const donutData = [
  {
    values: [2, 98],
    labels: ['', ''],
    sort: false,
    marker: {
      colors: ['#0099cc', '#535353'],
    },
    name: '',
    hoverinfo: 'none',
    textfont: {
      size: [16, 1],
      color: ['#ffffff', '#535353'],
      fill: ['#ffffff', '#535353'],
    },
    hole: 0.7,
    insidetextorientation: 'none',
    type: 'pie',
    textposition: 'none',
    automargin: true,
  },
];
const layout = {
  paper_bgcolor: '#262626',
  plot_bgcolor: '#262626',
  autosize: true,
  margin: { t: 100, b: 10, l: 0, r: 0 },
  font: {
    color: '#fff',
    family: 'Roboto',
    size: 18,
  },
  showlegend: false,
  width: 500,
  height: 500,
  title: {
    text: `donut`,
  },
  annotations: [
    {
      font: {
        size: 60,
      },
      showarrow: false,
      text: `30%`,
    },
  ],
};

I want to reduce space between title and donut chart. I tried adding pad:0 in margin object but it did not work. Also I couldn't find any related attribute in title object. Is there any property to help me? SS added.

ss

Solution

  • You can control the space by the variable y such as y=0.8 in the title parameter as follows:

    title: {
    text: `donut`,
    y: 0.8  # you can change this value as you prefer to reduce the space
  },