I create a packed bubbles with a useHTML option for the datalabels because I want these labels to be centered in each bubbles.
The result is fine, you can see it here : https://jsfiddle.net/vegaelce/1tk0m4qs/8/
My issue is about the parent node label, I would like it to be placed on top of each major bubble (as in the offical demo : https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series-packedbubble/packed-dashboard)
But as I need to set the useHTML flag on dataLabels, the label of parent node is placed in the center of each major bubble (which is not good).
If you set useHTML : false in my sample, the label of parent is correctly placed on top of the major bubbles but the labels of each bubbles is not centered anymore.
dataLabels: {
useHTML: true,
How can I mix the two things (useHTML and place the parent label on top of bubble) ?
You don't need to enable useHTML to center the labels. It is enough to set align: 'left' and 'text-anchor': 'middle' style. For example:
plotOptions: {
packedbubble: {
...,
dataLabels: {
...,
align: 'left',
style: {
'text-anchor': 'middle'
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/hdgL8yeb/
API Reference: https://api.highcharts.com/highcharts/series.packedbubble.dataLabels
Related
While trying to use https://github.com/blacklabel/grouped_categories/ i managed to get it working with an output as shown below
Is there a way that the following options can be modified
1. Removing the grids (I could manually change the stroke-width of those elements in the html to 0 to remove the grids, Is there a property / any other way available to do this?)
2. spacing between the categories
3. shifting the entire category table, so that i can insert a custom axis above it?
As you can see in the Grouped Categories plug-in documentation, you can use the groupedOptions property to apply your styles :
xAxis: {
labels: {
groupedOptions: [{
style: {
color: 'red' // set red font for labels in 1st-Level
}
}, {
rotation: -45, // rotate labels for a 2nd-level
align: 'right'
}],
rotation: 0 // 0-level options aren't changed, use them as always
},
categories: /* Your grouped categories */
}
You can therefore style almost everything you want of the xAxis.
EDIT
This will only allow you to modify the labels style. Sorry.
I need to draw a bar chart and need to set width and height for the container div (as there is only that amount of space I can use)
However, when I set height and width, in some cases, highchart will not draw some of the bar labels, even though I think there are places to draw them. Can someone explain this or maybe provide a workaround (without removing height)?
The jsfiddle is http://jsfiddle.net/daxu/md2zk/68/
labels: {
style: {
color: 'black',
fontFamily: 'DINPro',
fontSize: '7.8409px',
fontWeight: 'normal'
},
formatter: function () {
return this.value;
}
}
At the beginning, remove datalabels configuration per each point and use common options. There, you can disable hiding labels by crop option.
Example: http://jsfiddle.net/md2zk/70/
If I try to rotate the data labels in my column charts, I can not align the labels at the bottom of my columns, verticalAlign appears to be completed ignored.
basically trying to use:
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
rotation: -90
}
}
}
fiddle with it at: http://jsfiddle.net/FbhAs/
Anyone know a work-around?
-= Jab
The dataLabels don't seem to align correctly to the bottom. Instead, use the axis labels themselves. For a column chart, you would put this in xAxis for the chart options.
xAxis: {
labels: {
enabled: true,
rotation: -90,
y: -10 // negative goes upwards
}
}
You can then add styling, a formatter function, etc. as per dataLabels.
You can update datalabels position, based on translate() function which allows to "move" svg object for defined postiison.
http://jsfiddle.net/wMLg6/37/
var bottom = chart.plotHeight - 20;
$.each(chart.series[0].data,function(i,data){
data.dataLabel.attr({
y: bottom
});
});
Image 1
Image 2
I want to align left the label but when i do this, the label a stack on other like Image 2.
Please help me
This one works without fixed width:
.highcharts-axis-labels span {
left: 0 !important;
}
Since it uses the width of the biggest label and moves the smaller once by raising the "left" value, you can prevent that by setting it fix to 0. So no need of fix width or "align: left".
Update:
Labels "useHTML" setting must be set to true to work!
xAxis: {
labels: {
useHTML: true,
You can also set useHTML as true, use formatter for labels and then use CSS styles.
http://api.highcharts.com/highcharts#xAxis.labels.useHTML
http://api.highcharts.com/highcharts#xAxis.labels.formatter
EDIT:
http://jsfiddle.net/2QREQ/3/
xAxis: {
labels: {
//align: 'center'
useHTML:true,
formatter:function(){
return '<div class="label">'+this.value+'</div>';
}
}
},
CSS
.label {
text-align:left;
width:60px;
}
Give the green and the blue bar a container div/span. Then apply for both of the label and the container span/div a 'display: inline-block' css.
By doing so you would force the bars to 'give space' for the label.
I have a (horizontal) bar chart and I want to add dataLabel's at the base (or left most part) of the bar for the series.
similar to this: http://flowingdata.com/2009/05/22/poll-results-what-data-related-area-are-you-most-interested-in/
Is there a way using the formatter function to set this value?
plotOptions: {
bar: {
dataLabels: {
formatter: function() {
this.series.options.dataLabels.x = ?????????????
return this.y;
},
The task of the formatter function is to format the label text. It gives you a way to modify the internal state of the chart, but that's really just a hack and as such may or may not work.
One way to place the labels at the base is to use stack-labels instead of data-labels (the data-labels will be placed at the top of the bar either aligned left or right). To configure stack labels at the base, do:
yAxis: { // The y axis is horizontal 'bar' layout
stackLabels: {
style: {
color: 'white' // Make the labels white
},
enabled: true, // Enable stack labels
verticalAlign: 'middle', // Position them vertically in the middle
align: 'left' // Align them to the left edge of the bar
}
}
You will also need to set stacking to 'normal':
Example on jsfiddle:
Update: Labels for stack-totals will show the sum of all series for a specific category (stack) so only in the case of having one single series in the chart will stack-labels and data-labels show the same value.