CODEWITHSUNDEEP
javascriptplotlyplotly.js
Amanda
Amanda

Reputation: 41

How to change the font size of a value in a Gauge chart (Plotly.js)

Does anyone know how to change the font size of a value in a Gauge chart from Plotly.js? I wanted to make the font smaller (the number “20” below), in a way that didn’t stay above the title of the chart. I looked through Plotly.js reference, but couldn't find anything.

enter image description here

var data = [
  {
    type: "indicator",
    mode: "gauge+number",
    value: 20,
    title: { text: "Speed", font: { size: 24 }, yanchor: 'bottom' },
    gauge: {
      axis: { range: [0, 100], tickwidth: 1, tickcolor: "rgb(178, 178, 178)", tickmode: 'array', tickvals: [0, 100] },
      bar: { color: "rgb(237, 61, 61)", thickness: 1 },
      bgcolor: "rgb(178, 178, 178)",
      bordercolor: "rgb(178, 178, 178)",
    }
  }
];

var layout = {
  width: 600,
  height: 400,
  margin: { t: 25, r: 25, l: 25, b: 25 },
  paper_bgcolor: "lavender",
  font: { color: "black", family: "Arial" }
};

Plotly.newPlot('myDiv', data, layout);

Link to codepen: https://codepen.io/amandasantosf/pen/qBaNbGK

Upvotes: 1

Views: 2639

Answers (1)

Edward Knight
Edward Knight

Reputation: 309

This can be due using the "number" field, as seen here https://plotly.com/javascript/reference/indicator/#indicator-number-font-size

var data = [
  {
    type: "indicator",
    mode: "gauge+number",
    value: 20,
    number: { font: { size: 20 }},
    title: { text: "Speed", font: { size: 24 }, yanchor: 'bottom' },
    gauge: {
      axis: { range: [0, 100], tickwidth: 1, tickcolor: "rgb(178, 178, 178)", tickmode: 'array', tickvals: [0, 100] },
      bar: { color: "rgb(237, 61, 61)", thickness: 1 },
      bgcolor: "rgb(178, 178, 178)",
      bordercolor: "rgb(178, 178, 178)",
    }
  }
];

var layout = {
  width: 600,
  height: 400,
  margin: { t: 25, r: 25, l: 25, b: 25 },
  paper_bgcolor: "lavender",
  font: { color: "black", family: "Arial" }
};

Plotly.newPlot('myDiv', data, layout);

Upvotes: 1

Related Questions