JF-Mechs JF-Mechs - 6 months ago 46
jQuery Question

How to add text verticaly and horizantaly centered inside highchart solid gauge

I'm using highchart solid gauge, and can't figure out how can I add a text inside the chart itself. I added dataLabels but it does not being rendered on the chart.

Here is my Sample Fiddle

series: [{
borderColor: "#00B0FF",
data: [{
color: "#00B0FF",
radius: '75%',
innerRadius: '75%',
y: 85
}],
dataLabels: {
format: '<span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>'

}
}]

Answer

There are a couple of different ways, but a simple one is to use the something like the following:

title: {
    text: "TEST",
    verticalAlign: 'middle',
    floating: true
  }

For other options that require more javascript/jQuery code, see this other question:

Place text in center of pie chart - Highcharts

Comments