Databases
StackOverflow2013
Postsdbo
POHighcharts trying to show labels directly left of columns
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHighcharts trying to show labels directly left of columns
    text
    copied!<p>I have this highcharts graph and i'm trying to add labels such as "Total" or "Percent" that will be displayed directly to the left of all the numbers surrounding the chart. I'm wondering if there is an elegant way to do this in highcharts to avoid using html. It would be something like an extra column that's invisible or something. Thanks!</p> <p><img src="https://i.stack.imgur.com/k98kp.png" alt="highcharts"></p> <pre><code>new Highcharts.Chart({ "chart":{ "renderTo":setup.renderTo, // dynamic "type":"column", "width": 400, "height": 150 - setup.offset, "backgroundColor":"rgba(255,255,255,0)", borderWidth:0, borderColor:'#fff' }, "title":{ "text":"" }, "legend":{ "enabled":false }, "credits":{ "enabled":false }, xAxis:[{ categories:setup.x_mixed, maxZoom:5, minPadding: 0.2, labels:{ "enabled":setup.categories_label, "y":16, "style":{ "fontSize":13, "color":"#999", fontFamily:"'helvetica neue',helvetica", whiteSpace:"nowrap", textOverflow:"clip", width:"100%", marginTop:legendSpacing }, formatter:function () { return this.value.split("|")[0] } }, lineColor:"rgba(255,255,255,0)", tickWidth:0, offset:0 },{ categories:setup.x_mixed, maxZoom:5, minPadding: 0.2, linkedTo: 0, labels:{ "enabled":true, "y":16, "style":{ "fontSize":10, "color":"#999", fontFamily:"'helvetica neue',helvetica", whiteSpace:"nowrap", textOverflow:"clip", width:"100%", marginTop:legendSpacing }, formatter:function () { return this.value.split("|")[1] } }, lineColor:"rgba(255,255,255,0)", tickWidth:0, opposite: setup.categories_label, offset: -13 - setup.offset },{ categories:setup.x_mixed, maxZoom:5, minPadding: 0.2, linkedTo: 0, labels:{ "enabled":true, "y":16, "style":{ "fontSize":10, "color":"#999", fontFamily:"'helvetica neue',helvetica", whiteSpace:"nowrap", textOverflow:"clip", width:"100%", marginTop:legendSpacing }, formatter:function () { return this.value.split("|")[2] } }, lineColor:"rgba(255,255,255,0)", tickWidth:0, opposite: setup.categories_label, offset: - setup.offset }], "yAxis":{ "title":{ "text":false }, "gridLineWidth":0, "labels":{ "enabled":false }, "lineColor":"rgba(255,255,255,0)", "max":setup.max_p, "min":2, reversed:setup.reversed }, "plotOptions":{ "column":{ "color":setup.option_color, "shadow":false, "borderColor":"#fff", "borderWidth":0, groupPadding:0.07, pointPadding:0.01 } }, tooltip:{ shared: true, backgroundColor:'rgba(0,0,0,0.8)', style:{ color:'#ffffff' }, borderWidth:0, shadow:false, formatter:function () { if (navigator.userAgent.match(/msie/i)) { var response = setup.who + " " + this.x.split("|")[0] + " Fans : " + StringHelper.numberFormat(parseInt(this.y), 'flatCommas'); return response; } else { var response = setup.who + " " + this.x.split("|")[0] + "&lt;br/&gt;Fans : " + StringHelper.numberFormat(parseInt(this.y), 'flatCommas'); return response; } } }, "series":[ { "name":"series", "data":setup.data // "data": [1232, 4673, 1823, 186, 85, 15, 36] } ] }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload