Skip to content
Advertisement

Add percentage symbol to gauge indictor in plotly.js

I have a gauge from plotly.js, which currently looks like this:

enter image description here

I need to add the percentage symbol to the number (96 in this example). Trying to achieve this:

enter image description here

My current data and layout are:

var data = [{
    domain: {
      x: [0, 1],
      y: [0, 1]
    },
    value: 96,
    title: {
      text: "my title"
    },
    type: "indicator",
    mode: "gauge+number",
    gauge: {
      axis: {
        range: [0, 100],
        tickwidth: 0,
        tickformat: "",
        tickcolor: "transparent"
      },
      bar: {
        color: "limegreen"
      },
      bgcolor: "purple",
      borderwidth: 2,
      bordercolor: "white",
      steps: [{
        range: [0, 1],
        color: "grey"
      }, {
        range: [0, 1],
        color: "purple"
      }],
      threshold: {
        line: {
          color: "red",
          width: 4
        },
        thickness: 0.75,
        value: .75
      }
    }
  }];
  var config = {
    responsive: true,
    "displayModeBar": false
  }
  var layout = {
    width: 280,
    height: 200,
    margin: {
      t: 0,
      b: 0,
      l: 50,
      r: 50
    },
    paper_bgcolor: "transparent",
    font: {
      color: "whitesmoke",
      family: "Arial"
    }
  };
  Plotly.newPlot(target_id, data, layout, config)

Advertisement

Answer

under value: 96, add number: { suffix: "%" }

User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement