CODEWITHSUNDEEP
csswordpresshighcharts
Jeremy Chapman
Jeremy Chapman

Reputation: 1

Getting numbers on Y-axis to show up as percentages with code from a Highcharts code generator tool?

I'm the founder of a nonprofit news org that is a member of INN (The Institute for Nonprofit News). Some of us members have our wordpress news sites hosted for free through INN and therefore, cannot just install any plugins we want. INN must approve that first.

So the only way I have been able to use Highcharts is through this tool from Builtvisible that is a Highcharts code generator: https://builtvisible.com/highcharts-generator/

I've made a column chart here that is for a newborn screening story and is the Top-10 hospitals with the highest percentage of late samples. So when I hover over each bar I just want the tooltip to display 73%, instead of 73 like it does right now.

Any help would be greatly appreciated. I'm not very knowledgeable with coding and have tried a few things, even contacting the person who built this code generator but I can't figure out how to make it work. For another column chart also I have the same issue but I need it to separate the thousands with a comma instead of a space. So I would like 1,000 to read like that, instead of 1 000.

Here is my code from the generator where I need it to display percentages:

<div id="chart_container"></div><script src="//code.highcharts.com/adapters/standalone-framework.js"></script><script src="//code.highcharts.com/highcharts.js"></script><script>new Highcharts.Chart({"chart":{"backgroundColor":"#fefefe","renderTo":"chart_container","type":"column"},"title":{"text":"Top-10 facilities for lateness"},"colors":["#476974","#3ca1c1","#4ccbf4","#96dff6","#c9e8f6"],"legend":{"enabled":true,"margin":30},"xAxis":{"tickWidth":0,"labels":{"y":20},"categories":["Facilities with the highest overall percentage of late samples"]},"yAxis":{"tickWidth":0,"labels":{"y":-5},"title":{"text":"Percentage (%)"}},"series":[{"name":"NE MT HLTH SERVICES WOLF POINT","data":[73]},{"name":"CLARK FORK VALLEY HOSPITAL","data":[71]},{"name":"MARCUS DALY HOSPITAL","data":[68]},{"name":"ST JOSEPH HOSPITAL","data":[65]},{"name":"SIDNEY HEALTH CENTER","data":[64]},{"name":"THE BIRTH CENTER, MISSOULA","data":[63]},{"name":"GLENDIVE MEDICAL CENTER","data":[59]},{"name":"FRANCES MAHON DEAC HOSPITAL","data":[57]},{"name":"ST LUKE HOSPITAL","data":[55]},{"name":"CABINET PEAKS MEDICAL CENTER","data":[53]}]});</script>

Here is the other column chart where I would like the thousands to be separated by a comma when you hover over each column and it brings up the tool tip. This is also code from the Builtvisible Highcharts code generator:

<div id="chart_container2"></div>
<script src="//code.highcharts.com/adapters/standalone-framework.js"></script><script src="//code.highcharts.com/highcharts.js"></script><script>// <![CDATA[
new Highcharts.Chart({"chart":{"backgroundColor":"#fefefe","renderTo":"chart_container2","type":"column"},"title":{"text":"Wisconsin Lab: On-Time Performance"},"colors":["#6AA121","#2069A1","#A12069","#96dff6","#c9e8f6"],"legend":{"enabled":true,"margin":30},"xAxis":{"tickWidth":0,"labels":{"y":20},"categories":["2011","2012","2013","2014"]},"yAxis":{"tickWidth":0,"labels":{"y":-5},"title":{"text":"Number of samples on-time vs. late"}},"series":[{"name":"On-time","data":[7006,5492,5589,7069]},{"name":"Late","data":[3857,4979,5189,4105]},{"name":"Very Late","data":[701,1075,1074,776]}]});
// ]]></script>

Upvotes: 0

Views: 59

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

This "tool code" is just regular Highcharts code, and does nothing more than generate it for you.

For the first chart you can use valueSuffix to add a percentage sign after the value. Code:

plotOptions: {
    column: {
        tooltip: {
            valueSuffix: '%'
        }
    }
}

For the second chart you can use the global thousandSep option to get comma separators. Code:

Highcharts.setOptions({
    lang: {
        thousandsSep: ','
    }
});

See this JSFiddle demonstration of both code segments.

Upvotes: 1

Related Questions