I have one Bubble Highchart and need to display Y-Axis price value as price range like '1-10', 11-20', '21-30'
But I am not able to achieve the same.
How can I achieve this?
Hello ppotaczek, Thank you very much for your quick response. I am trying achieve the bubble chart with below screen-shot.
Please refer this screen-shot
Thanks
You can simply use formatter function:
yAxis: {
labels: {
tickInterval: 25,
formatter: function() {
if (this.value > 0) {
return this.value - 24 + ' - ' + (this.value);
}
return this.value;
}
},
}
Live demo: https://jsfiddle.net/BlackLabel/3rqdn5pj/
API Reference:
https://api.highcharts.com/highcharts/yAxis.tickInterval
https://api.highcharts.com/highcharts/yAxis.labels.formatter
Related
How show Ticker from the start of plot along with the label value?
I want the ticker to start at the plot and also show the correct value.
I set pointStart to start of the x-axis value.
When I set startOnTick to true. And for know tickIntervalto 30 minutes. (tickInterval varies based on the data interval)
this is what I get.
Any way to show the ticker at the start of the plot.
Use the tickPositioner function, for example:
xAxis: {
type: 'datetime',
startOnTick: true,
labels: {
formatter: function() {
return Highcharts.dateFormat('%k:%M', this.value);
}
},
tickPositioner: function() {
var ticks = [],
dataMin = this.dataMin,
dataMax = this.dataMax,
tickInterval = (dataMax - dataMin) / 5;
for (var i = this.dataMin; i <= this.dataMax; i += tickInterval) {
ticks.push(i);
}
return ticks;
}
}
Live demo: http://jsfiddle.net/BlackLabel/aswzfrnc/
API Reference:
https://api.highcharts.com/highcharts/xAxis.tickPositioner
https://api.highcharts.com/class-reference/Highcharts#.dateFormat
Should be easy, I have negative values in a Highcharts bar chart that when I make the format ${y} the value comes out as $-157, what is the correct syntax to make the label -$157?
Thanks,
CM
I am unsure if there is a built-in option in Highcharts to do this for currencies, but a way you could achieve this is by using the formatter callback like this:
dataLabels: {
enabled: true,
formatter: function() {
return (this.y >= 0 ? '' : '-') + '$' + Math.abs(this.y)
}
}
Working JSFiddle example: http://jsfiddle.net/ewolden/4o7k210s/
Can you please take a look at This Demo and let me know how I can add some custom data from an array to tooltip in highchart?
var extras = ["Values More Than 1000", "Values More Than 2000", "Values More Than 3000", "Values More Than 4000", "Values More Than 5000"];
As you can see the array length is equal to the column numbers so the extras[0] with go with tooltip for column 1
some thing like
You can customize the tooltip with the formatter option.
tooltip: {
formatter: function () {
var index = this.series.points.indexOf(this.point);
return extras[index] + ': ' + this.y;
},
style: {
width: 250,
fontSize: '15px'
}
}
Here's a jsFiddle:
http://jsfiddle.net/opgp10mj/3/
I'm using dotnet.highcharts to generate a chart.
If I do not set any label formatting on the y-axis labels, this is what is displayed.
This is good.
So 200M = 200,000,000
And it looks like this is done automatically.
If I wanted to put a $ in front of the value and I use:
function() { return '$' + Highcharts.numberFormat(this.value, 0) ; }
Then the label will now display $200,000,000.
How would i get the format to display it with the short form with the dollar sign like $200M ?
thanks.
Unfortunately in this case, you have to either take the pre formatted label, or rebuild the level of abbreviation you want in the formatter yourself.
In this case, you could something like
yAxis: {
labels: {
formatter: function() {
return '$'+this.value / 1000000 + 'M';
}
}
},
According to this stackoverflow post, you can call the original formatter with:
this.axis.defaultLabelFormatter.call(this);
Put this code before call the chart
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
I can't find the settings for my problem in the Highchart API.
I've cerated an example on jsFiddle http://jsfiddle.net/qErT2/
How can I swap 1,000 into 1000 ??
Greetings
HighChart number format is the same like PHP NUMBER FORMATS
you can use this format any where
for tooltip
tooltip: {
formatter: function ()
{
return '<b>' + this.series.name + '</b><br/>' + this.x + ' - <b>' + Highcharts.numberFormat(this.y, 0,'',''); + '</b>';
}
}
for yAxis
yAxis: {
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 0,'','');
}
}
},
YOUR EXAMPLE MODIFIED DEMO (tooltip)
AND UPDATED DEMO (tooltip and yAxis labels)
Take look at lang options http://api.highcharts.com/highcharts#lang and obviously you can use Highcharts.numberFormat() http://api.highcharts.com/highcharts#Highcharts.numberFormat() which can be used in tooltip formater / label formatter to display numbers as you need.
http://api.highcharts.com/highcharts#yAxis.labels.formatter