javascript - Adding round corners to Highcharts Bar Chart with stacked bars when value is 0 -

-

i'm using highcharts , love them, issue when add use round corner plugin, if have stacked chart 0 in it, radius wont applied.

issue: here take @ jun , july.

goal: in case need way assign radius left of june , right of july.

var chart = new highcharts.chart({     chart: {         renderto: 'container',         type: 'bar'     },     xaxis: {         categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']     },     plotoptions: {         bar: {             stacking: 'normal',             animation: false         }     },     series: [         {             data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 0, 148.5, 216.4, 194.1, 95.6, 54.4],             // usage:             borderradiustopleft: 5,             borderradiustopright: 5         }, {             data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],             // usage:             borderradiusbottomright: 10,             borderradiusbottomleft: 10         }     ] });

you can adjust rounded-corners.js needs this

(function (h) {     var curpercentage=[];     h.wrap(h.seriestypes.column.prototype, 'translate', function (proceed) {          var options = this.options,             rtopleft = options.borderradiustopleft || 0,             rtopright = options.borderradiustopright || 0,             rbottomright = options.borderradiusbottomright || 0,             rbottomleft = options.borderradiusbottomleft || 0,             topmargin = options.topmargin || 0,             bottommargin = options.bottommargin || 0;          proceed.call(this);          if (rtopleft || rtopright || rbottomright || rbottomleft) {              h.each(this.points, function (point) {                 var ibottomright = rbottomright,                     ibottomleft = rbottomleft,                     itopright = rtopright,                     itopleft = rtopleft;                  //console.log(point);                 if (typeof(curpercentage[point.index])=='undefined'){                     curpercentage[point.index]=0;                 }                 var prevpercentage = curpercentage[point.index];                 curpercentage[point.index]+=1.0*parsefloat(point.percentage).tofixed(6);                 //console.log(prevpercentage);                 //console.log(curpercentage);                  if (prevpercentage==0 & curpercentage[point.index] == 100) {                     // special case, 1 value > 0, preserve border radius                     // reset next call                     curpercentage[point.index]=0;                  } else if (prevpercentage==0) {                     //right side                     ibottomright = 0;                     ibottomleft = 0;                 } else if (curpercentage[point.index] == 100) {                     //left side                     itopright = 0;                     itopleft = 0;                     // reset next call                     curpercentage[point.index]=0;                 } else {                     // no radius                     ibottomright = 0;                     ibottomleft = 0;                     itopright = 0;                     itopleft = 0;                 }                  var shapeargs = point.shapeargs,                     w = shapeargs.width,                     h = shapeargs.height,                     x = shapeargs.x,                     y = shapeargs.y;                  // preserve box data labels                 point.dlbox = point.shapeargs;                  point.shapetype = 'path';                 point.shapeargs = {                     d: [                         'm', x + itopleft, y + topmargin,                     // top side                     'l', x + w - itopright, y + topmargin,                     // top right corner                     'c', x + w - itopright / 2, y, x + w, y + itopright / 2, x + w, y + itopright,                     // right side                     'l', x + w, y + h - ibottomright,                     // bottom right corner                     'c', x + w, y + h - ibottomright / 2, x + w - ibottomright / 2, y + h, x + w - ibottomright, y + h + bottommargin,                     // bottom side                     'l', x + ibottomleft, y + h + bottommargin,                     // bottom left corner                     'c', x + ibottomleft / 2, y + h, x, y + h - ibottomleft / 2, x, y + h - ibottomleft,                     // left side                     'l', x, y + itopleft,                     // top left corner                     'c', x, y + itopleft / 2, x + itopleft / 2, y, x + itopleft, y,                         'z']                 };              });         }      }); }(highcharts));

working jsfiddle demo

with change, need set border radius in series

series: [{         data: [50, 71.5, 106.4, 129.2, 144.0, 176.0, 0, 148.5, 216.4, 194.1, 95.6, 54.4],         // usage:         borderradiustopleft: 5,         borderradiustopright: 5,         borderradiusbottomright: 5,         borderradiusbottomleft: 5,             }, {         data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],         borderradiusbottomright: 10,         borderradiusbottomleft: 10,         borderradiustopleft: 10,         borderradiustopright: 10     }]

Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more