I'm wondering if it is possible to place two text titles at each side (negative/positive), centralized on each side.
I tried with this jsfiddle.
...
yAxis: [{
title: {
text: "right",
align: "right"
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
{
title: {
text: "left",
align: "left"
}
}
I tried to add another yxis, but it doesn't work.
you can only set xaxis title to
"low", "middle" by default, "high"
but for multiple title ,i think its not possible via api, it depends on your axis.
like you have one xaxis and 2 yaxis,
so you can have title separatly on both yaxis but not on xaxis.
the problem is you cant get the center point (0,0), if you can get Y of this point then you can update Y for the title.
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'
},
}
}
In my area chart I have three series which are presorted chronologically. This is what I am currently getting to display:
I'm using React which is why you see multiple renders, just ignore that. My dates that I am returning for the xAxis are in order but I'm only getting one. Why is that? Here is my code (using React Highcharts but it shouldn't matter I don't think):
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
const dayStr = moment.unix(this.value).format('D');
const monthStr = moment.unix(this.value).format('M');
console.log(`${monthStr}/${dayStr}`, this.value);
return `${monthStr}/${dayStr}`;
},
align: 'left',
style: { "color": "#FFFFFF" }
},
title: {
text: 'Date',
style: { "color": "#FFFFFF" }
}
},
As you can see my formatter function is returning multiple dates but only one displays.
By default Highcharts algorithms decide which ticks to display (labels are drawn where the ticks are). Also some labels might be omitted when there's no enough space to place them.
Use tickPositions to force Highcharts to draw given ticks. You can also try tickPositioner to modify the ticks generated automatically.
API references:
https://api.highcharts.com/highcharts/xAxis.tickPositions
https://api.highcharts.com/highcharts/xAxis.tickPositioner
I need the xAxis label to have a tool tip. But when I use a formatter to add the tool tip , then long labels tend to overlap with the chart instead of pushing it to the right. Also this only happens if the label has a white space , if white spaces are removed then it work properly and pushes the chart to the right. This problem is shown in this fiddle: http://jsfiddle.net/W5wag/44
$(function(){
var chart1;
$(document).ready(function(){
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
xAxis: {
categories: ['cat1aaaaaaaaaaaaaaaasadadadad adadaaaaaaaaaaaaaaaaaaaaa', 'cat2', 'cat3', 'cat4', 'cat5'],
labels: {
formatter: function() {
return '<span title="abc">' + this.value + '</span>';
},
useHTML: true,
style: {
whiteSpace: 'nowrap'
}
},
},
};
options.series = [{
data: [3, 4, 4, 3, 9]
}];
chart1 = new Highcharts.Chart(options);
});
})
I tried to execute some code after the labels have been rendered, but my experience is a bit limited there. I'd try to find the maximum width of any of the x-axis labels, set that as the min-width of the parent (as below), and invalidate the labels to trigger a redraw. Maybe you can find a way to do that.
If all else fails, you could "cheat" with these quick-n-dirty solutions:
Set the text without spaces, and add them afterwards, when the layout is done.
window.setTimeout(()=>document.querySelector('span[title=abc]')
.innerHTML='cat1aaaaaaaaaaaaaaaasadadad adadadaaaaaaaaaaaaaaaaaaaaa', 500);
Or, add css to the page (which requires knowing how wide the labels will be, though):
.highcharts-axis-labels.highcharts-xaxis-labels > * { min-width: XXXpx }
I have a couple of formatting questions, as you'll see I'm running a very small chart 225*150...
How do I remove the x-axis labels? I still want the information in the tooltip, just not along the axis. I've tried...
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
...but it still shows "0, .5, 1, 1.5 etc..."
I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?
Last one, how do I set zero for the y-axis scale?
Here's a fiddle!
Thanks!
UPDATE: Added suggestions to original fiddle.
In this block:
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
You have
1) the categories property listed inside the title attribute, and
2) you have enabled: false set for the title attribute
categories is a property of the axis directly, and the enabled: false should be applied to the labels, not the title.
"I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?"
Primarily the marker radius property:
http://api.highcharts.com/highcharts#plotOptions.series.marker.radius
You can also look at the lineWidth property of the marker.
"Last one, how do I set zero for the y-axis scale?"
axis min property:
http://api.highcharts.com/highcharts#yAxis.min
updated fiddle: http://jsfiddle.net/jlbriggs/z6ZLt/8/
To disable the xAxis.labels you set enabled to false:
xAxis: {
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled: false,
labels: {
enabled: false
}
}
For doing "set zero for the y-axis scale" you set the yAxis.min value to 0:
yAxis: {
min: 0,
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}
To handle the size of the line + markers you need to modify their properties in :
plotOptions: {
series: {
marker: {
radius: 1.5
},
pointWidth: 1
}
}
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.