1

Is it possible to combine the following?

Fiddle 1 (answered by mäksä) as a main template:

  • Single horizontal stacked bar with bar segments

Combined with the following features of Fiddle 2 (answered by aus_lacy):

Always visible on bar segments:

  • Data names (labels) (i.c. "apples", "pears",...)
  • Percentages (calculated if possible: "50%","50%",...)

Shown on mousehover:

  • Original data numbers (i.c. "15","15",...)
  • Series name/description (i.c. "Browser share")

Almost but not quite:

An example of a horizontal bar chart with "percentages" always shown, and "original data numbers" on mousehover can be found in Fiddle 3 (answered by jlbriggs), but there the "data names" are lacking, and I can't find a way to change the "series name". Further more: this is a horizontal bar chart, but this is not a single stacked one.

Any help would greatly be appreciated, many thanks.

Community
  • 1
  • 1
O0123
  • 481
  • 9
  • 28

1 Answers1

1

Again it's a simple modification of the Highcharts attributes in particular this small snippet:

bar: {
        dataLabels: {
           enabled: true,
           distance : -50,
           formatter: function() {
                 var dlabel = this.series.name + '<br/>';
                 dlabel += Math.round(this.percentage*100)/100 + ' %';
                 return dlabel
           },
           style: {
                 color: 'white',
           },
        },

  },

I think this snippet is what you are after?

alacy
  • 4,972
  • 8
  • 30
  • 47
  • Great! Thanks a bunch for another precise answer. – O0123 Jan 24 '15 at 11:44
  • And then (just a small adaptation to mimic the *Fiddle 1* lay-out) `gridLineWidth: 0`, can be added inside `yAxis: {`...`}`, to remove the vertical stripes/measure bars --- But after that, I am still wondering how to remove the **only remaining vertical stripe** (outmost left) which is also removed in *Fiddle 1*. – O0123 Jan 24 '15 at 11:56
  • Works like a charm! I noticed your perfect solution was to add `lineWidth: 0,` inside `xAxis: {`...`}`. – O0123 Jan 24 '15 at 12:01
  • I'm sorry to bother again, but I am still looking for some other details to completely mimic *Fiddle 1* some more. --- The legend can be removed by adding `enabled:false,` inside `legend: {`...`}`, the title can be removed by changing the text in `title: {`...`}` to `text: '',` the x-axis name can be removed by changing the text in `yAxis: {`...`}` to `text: '',`. --- But I haven't found out how to remove the **x-axis measure numbers** below the chart. Neither how to remove the **y-axis name** "*Fruits*", since this seems coupled with the series name on mousehover (which I want to keep). – O0123 Jan 24 '15 at 12:28
  • Your precious help has allowed me to implement what I wanted. --- Unfortunately, a glitch is that for small bar segments, `dataLabels` will not be readable. --- I have posted a new question about it here: *[Highcharts single row stacked horizontal bar: labels overlap — bar segments too small to read “dataLabels” — (change “distance” of “dataLabels”?)](http://stackoverflow.com/questions/28126688/highcharts-single-row-stacked-horizontal-bar-labels-overlap-bar-segments-to)*, where you can also see the implementation I wanted to achieve. – O0123 Jan 24 '15 at 14:54