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.
Related
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
I want to only show the first and last label for the xAxis. Then, I want to show it without rotation and in a single line. And when I do this, this happens and the last label gets cut when there are many columns or the width of the viewport is small.
Demo online:
https://jsfiddle.net/8esnf4dj/
This is my xAxis config:
xAxis: {
categories: [....],
labels: {
rotation: 0,
style: {
textOverflow: 'none',
whiteSpace: 'nowrap'
},
}
}
Is there any way to align the text in a way that this won't happen?
I've seen that this can be fixed by adding chart.marginRight but I would rather prefer not to "lose" that space not the right and just align the text in a way that will always be visible.
I am not sure if it is possible to achieve it by using only API options, because all the labels are rendered in the center of the tick, but you can move/set the position of each label 'manually'.
events: {
render() {
const chart = this;
const xAxis = chart.xAxis[0];
const lastTickPosition = xAxis.tickPositions.length - 1;
const lastLabel = chart.xAxis[0].ticks[lastTickPosition].label;
lastLabel.translate(-lastLabel.getBBox().width/ 4, 0)
}
}
Demo: https://jsfiddle.net/BlackLabel/kbn7zwfc/
API: https://api.highcharts.com/highcharts/chart.events.render
You can use "align: right"
Read the usage of align to understand why this works. Basically this would mean that the bar would align to the rightmost end of the label so the label always fits
xAxis: {
categories: [....],
labels: {
rotation: 0,
align: "right",
style: {
textOverflow: 'none',
whiteSpace: 'nowrap'
},
}
}
I wanted to show Bar(column) chart using HighChart, but bar chart should show holo columns(transparent column with borders). For this purpose I set color and borderColor as follows
plotOptions: {
series: {
color: Highcharts.Color('#000000').setOpacity(0).get('rgba'),//'#000000'
borderColor: '#000000'
}
},
but it is not showing series symbol in legends, as shown in this jsFiddle. Is there anyway to show series symbol in Legends, keeping columns(bars) to appear holo(transparent with visible borders).
I am using ideas from Style by CSS from highcharts to customize the label
Fiddle link
css
.highcharts-legend-item * { /*for default case*/
fill: black !important;
}
.highcharts-legend-item-hidden * { /*when clicked*/
fill: gray !important;
}
The legend symbol is not showing because it's color has the opacity 0, the same as the serie.
Couldn't find anything that would allow you to set the color of the marker, but i have a workaround.
You can format the legend label with the symbol, here you can find some of those symbols http://www.fileformat.info/info/unicode/block/geometric_shapes/list.htm
Here is the code to hide the legend symbol when it's hidden and format it's label.
legend: {
symbolPadding: 0,
symbolWidth: 0.001,
symbolHeight: 0.001,
symbolRadius: 0,
labelFormatter: function () {
return "◼ " + this.name;
}
},
full fiddle here http://jsfiddle.net/hfuuocdw/2/
I fixed it by setting color and border color of each series, and then adding a css style for "fill" to be transparent, as shown in this fiddle.
.highcharts-series-group .highcharts-point {
fill: rgba(0,0,0,0)
}
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/
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.