using HighChart bar chart. aiming for big font labels on the bars
have increased font size in the datalabels.style.fontSize = 50
but labels only show in 2 of the right hand columns!
making font smaller (e.g. 30) it only shows in one bar... weird!
http://jsfiddle.net/py6txbr9/57/
dataLabels: {
enabled: true,
style: {
fontSize: 30,
color: 'white'
}
},
welcome any thoughts if this is happened to anyone else - can't find any bugs or issues else where.
thanks
Defaulty databales are printed "above" column, so when you set white color, there are "invisible". The solution is set "inside" flag as true and verticalAlign as top
dataLabels: {
enabled: true,
verticalAlign:'top',
inside:true,
style: {
fontSize: 30,
color: 'white'
}
},
Example: http://jsfiddle.net/py6txbr9/59/
Related
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 need one help on high chart options,
How to remove the white colour around the percentage with in the pie chart options.
I have attached the image, please see that and help me for this issue.
Please click here
This can be done by modifying the textOutline style property like:
...
plotOptions: {
pie: {
datalabels: {
style: {
textOutline: false
}
}
}
},
...
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/
Is there any way to update the font size/color of the dates in the navigator in Highstock?
Based on the documentation, it doesn't have the usual style property. I wanted to decrease the font size of the dates and experiment on the color a bit but HS doesn't seem to have that option.
navigator: {
xAxis: {
labels: {
style: {
color: '#6D869F',
fontWeight: 'bold'
}
}
},
},
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.