CODEWITHSUNDEEP
javascriptgraphgoogle-visualization
NavyPixel
NavyPixel

Reputation: 260

Custom labels and positions for google chart api

I have started to delve into using google charts to improve user visualization on a friends admin backend,

i can get it to pull data and display the donut charts he requested from initiall photoshop designs, but im struggling to research and understand how i can work with the charts labels.

i am generating the chart;

var chart = new google.visualization.PieChart(document.getElementById('donut_1'));
chart.draw(data_donut1, {pieHole: .6,
    width: 155, height: 155,
    chartArea:{width:"90%",height:"90%"},
    legend: 'none',
    pieSliceBorderColor: '#16a085',
    backgroundColor: '#16a085',
    colors: ['#bae3db', '#5cbdaa'],
    enableInteractivity: false,
    tooltip: { trigger: 'none' } });
}

what my friend wants is for the labels to be hidden and show the biggest value label in the centre of the donut (with css formatted text)

here is my jsfiddle of what i'm currently working with; http://jsfiddle.net/achudars/6M2sH/

here is a visualization of what my friend wants,

graph can anyone point me in the right direction please? i cant find how to alter label or even if its possible to only show the 1 value?

i found the pieSliceText: 'none', option which can remove them all

but how can i get the label to show the value label in the centre of the 1 result?

Upvotes: 1

Views: 1944

Answers (1)

marimaf
marimaf

Reputation: 5410

I found this codepen that might help you: https://codepen.io/cireriddler/pen/yyeLpE

Create a div that will be positioned over the chart:

<div id="donutchart" class="col-xs-12 col-sm-6 col-md-4">
  <div id="chart"></div>
  <div id="labelOverlay">
    <p class="used-size">41<span>GB</span></p>
    <p class="total-size"> of 50GB</p>
  </div>
</div>

And the corresponding CSS:

#donutchart,
#chart {
  width: 500px;
  height: 500px;
  font-family: Arial;
}

#donutchart {
    position: relative;
}

#labelOverlay {
    width: 90px;
    height: 45px;
    position: absolute;
    top: 233px;
    left: 205px;
    text-align: center;
    cursor: default;
}

#labelOverlay p {
  line-height: 0.3;
  padding:0;
  margin: 8px;
}

#labelOverlay p.used-size {
  line-height: 0.5;
  font-size: 20pt;
  color: #8e8e8e;
}

#labelOverlay p.total-size {
  line-height: 0.5;
  font-size: 12pt;
      color: #cdcdcd;
    }

Upvotes: 1

Related Questions