Highcharts: To bold last total value of stacked column -


i been trying bold last total value of stacked column. needed.

thanks in advance!

it keep asking me write more keep asking me write more keep asking me write more keep asking me write more keep asking me write more keep asking me write more

http://jsfiddle.net/leslie20/ekylqz47/

$(function () {           highcharts.setoptions({             global: {               vmlradialgradienturl: 'http://code.highcharts.com/{version}/gfx/vml-radial-gradient.png',  // path pattern image required vml browsers in order draw radial gradients.               canvastoolsurl: 'http://code.highcharts.com/{version}/modules/canvas-tools.js'            // url additional file lazy load android 2.x devices. these devices don't support svg, download helper file contains canvg, dependecy rbcolor, , our own canvg renderer class.             },             title: {                 align: 'left',                 style : { color: '#f7921e',fontsize: '14px', fontweight: 'bold'}             },             plotoptions: {                 series: {                     grouppadding: 0.1,                     pointwidth: 28,                     padding: 2                 }             },             xaxis: {                 tickcolor: 'null',                 linecolor: '#4d4d4f',                 labels: {                     formatter: function () {                         if (this.islast) {                             return '<span style="font-weight: bolder; font-size: 12px">' + this.value + '</span>';                         }                          else {                            return this.value;                         }                     }                 }             },             legend: {                 itemstyle: {                     fontweight: 'normal'                 }             },             credits: {enabled: false},             lang: {               loading: 'loading...', // loading text appears when chart set loading state                thousandssep: ','  // default thousands separator used in highcharts.numberformat method unless otherwise specified in function arguments.             }             // tooltip: {enabled: false}           });  $('#container6').highcharts({             chart: { type: 'column' },             title: { text: 'cash distribution per share (declared)'},              xaxis: {                 categories: [                     '2010',                     '2011',                     '2012',                     '2013',                     '2014'                 ]             },             legend: {                 reversed: true,             },              yaxis: {                 min: 0,                 gridlinecolor: '#ffffff',                 title: {text: ''},                 labels: { enabled: false },                 stacklabels: {                      enabled: true,                     y: -3,                     formatter: function() {                         return  highcharts.numberformat(this.total, 1);                     },                      style: {                         fontweight: 'normal'                     }                 }             },             plotoptions: {                  column: {                     stacking: 'normal',                      datalabels: {                         enabled: true,                         format: '{point.y:,.1f}',                         style: {                           textshadow: false,                        }                     }                  }             },             series: [{                 name: 'special dividend<br>(cents)',                 tooltip: {                     pointformat: 'special dividend: <b>{point.y:,.1f} cents</b>'                 },                 color: '#414042',                 data: [3.5, null, 1.7, 7.1, null],                 datalabels: {                     enabled: true,                     style: {                         fontweight: 'normal'                     },                     formatter: function() {                         if (this.y != 0) {                           return this.y;                         } else {                           return null;                         }                     }                 }              }, {                 name: 'final dividend<br>(cents)',                 tooltip: {                     pointformat: 'final dividend: <b>{point.y:,.1f} cents</b>'                 },                 color: '#f7921e',                 datalabels: {                     enabled: true,                     style: {                         fontweight: 'normal'                      },                 },                 data: [7.7, 7.9, 6.3, 7.1, {                     datalabels: {                         enabled: true,                         style: {                             fontweight: 'bolder',                             fontsize: '12px'                         },                     },                     y: 11.9                 }],                }, {                 name: 'interim dividend<br>(cents)',                 tooltip: {                     pointformat: 'interim dividend: <b>{point.y:,.1f} cents</b>'                 },                 color: '#939598',                 datalabels: {                     enabled: true,                     style: {                         fontweight: 'normal'                     },                 },                 data: [6.3, 6.6, 6.6, 6.8, {                     datalabels: {                         enabled: true,                         style: {                             fontweight: 'bolder',                             fontsize: '12px'                         },                     },                     y: 7.0                 }],              }]         });       });

thanks in advance!

you can use stacklabels formatter , check last tick on xaxis compared current x of stacklabel. if same, bold that.

formatter: function () {                 var ticks = this.axis.chart.xaxis[0].tickpositions,                     len = ticks.length,                     last = ticks[len - 1];                  if(this.x === last)                      return '<span style="font-weight:bold">' + highcharts.numberformat(this.total, 1) + '</span>';                 else                     return highcharts.numberformat(this.total, 1);             },

example: http://jsfiddle.net/ekylqz47/2/


Comments

Post a Comment

Popular posts from this blog

python - Mongodb How to add addtional information when aggregating? -

i beginner , wrote line pipeline works, wanna add other information output, screen name , or number of tweets.i tried add under $group gave me syntax error everytime here pipeline: def make_pipeline(): # complete aggregation pipeline pipeline = [ { '$match': { "user.statuses_count": {"$gt":99 }, "user.time_zone": "brasilia" } }, { "$group": { "_id": "$user.id", "followers": { "$max": "$user.followers_count" } } }, { "$sort": { "followers": -1 } }, { "$limit" : 1 } ]; i using on example : { "_id" : objectid("5304e2e3cc9e684aa98bef97"), "text" : "first week of school on :p", "in_reply_to_status_id" : null, "retweet_count" : null, ...
Read more

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

i have 1 application using @manytomany annotation link 2 different entities 1 parent entity. not sure if have implemented properly. when execute .findone() on parent entity's repository find it, @ first fetch data along executing delete queries internally delete record mapping table (a table jpa creates after adding @manytomany annotation.). following generated sql queries , code snippet: java class @entity @table(name = "inventory") public class inventory { @id long id; // many other properties @manytomany(fetch=fetchtype.lazy) private list<stream> streams; @manytomany(fetch=fetchtype.lazy) private list<subject> subjects; } there no other annotation i've put in stream , subject entity class link inventory class. when run app, create following tables: inventory stream subject inventory_stream inventory_subject (inventory_stream , inventory_subject, 2 tables created automatically, don't k...
Read more

ruby - Net::HTTP extremely slow responses for HTTPS requests -

for reason, on development machine i'm getting very, slow responses https requests performed via net::http. i've tried restclient , httparty , both have same issue. seems have sprung nowhere. i've made these requests hundreds of times without issue, today unbearably slow. pry(main)> puts time.now; httparty.get('https://api.easypost.com/v2/addresses'); puts time.now; 2015-04-29 08:07:08 -0500 2015-04-29 08:09:39 -0500 as can see, response took 2.5 minutes. , it's not easypost api url. i've tried numerous ssl requests servers know can connect ( https://google.com , https://weather.com , etc.) , result in same behavior. also, noticed same thing happens requests redirected http https. now, check out non-ssl request: pry(main)> puts time.now; httparty.get('http://lookitsatravis.com'); puts time.now; 2015-04-29 08:12:22 -0500 2015-04-29 08:12:22 -0500 instantaneous. gives? guess configuration problem somewhere between ruby , openssl. i...
Read more