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: ','
}
});
Related
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
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/
I'm using Highcharts and need to chart data with quarterly frequency using a format like 'yyyy Q#'.
I found how to format the periods in the tooltip (using a JS formatter function) and would now like to use the same format in the rangeSelector 'From' and 'To' input fields.
From the documentation I see I could use 'inputDataFormat', but that has the standard PHP strftime formatter function, which does not cover my requirement.
Any idea appreciated!
Massimo
It is possible to extend Highcharts format. You need to define Highcharts.dateFormats object:
Highcharts.dateFormats = {
Q: function(timestamp) {
var date = new Date(timestamp),
y = date.getFullYear(),
m = date.getMonth();
return y + '.Q' + (Math.floor(m / 3) + 1);
}
};
And then you can use 'Q' to format timestamp.
rangeSelector: {
inputEnabled: true,
inputDateFormat: '%Q'
},
example: http://jsfiddle.net/twcu0djj/
I am rewriting a custom view to regular views. For example
Pseudo code
if (date = today) {
context.push('...; style="color:red; ...}
else {
context.push('...; style="color:black; ...}
;
becomes
mondayLabelView: SC.LabelView.extend({
layout: {top:90, left:700, width:200, height:18},
classNames: ['App-monday'],
valueBinding: SC.Binding.oneWay('App.someController.selectedMondayDate'),
}),
Question, how to rewrite the dynamic color part?
I would suggest using the classNameBindings property to dynamically add a CSS class. This way, you do not need to use the style tag.
You can view more about it at http://blog.sproutcore.com/classnamebindings-easy-dynamic-css/ but the basic idea is as follows:
mondayLabelView: SC.LabelView.extend({
layout: {...},
valueBinding: SC.Binding.oneWay('App.someController.selectedMondayDate'),
isToday: function() {
// Psuedo-code, you'll probably need SC.DateTime to actually compare the dates
return this.get('value') == today;
}.property('value'),
classNameBindings: ['isToday:date-is-today'],
})
Then, in your CSS, you would have something like:
.date-is-today {
color: red;
}
As an absolute (syntax) beginner, I don't know what the suggested statement 'return this.get('value') == today;' exactly means, that is the '== today' part?
Maybe asking too much, but to compare the dates and set the return value I was thinking of
tuesdayLabelView: SC.LabelView.extend({
layout: {top:90, left:500, width:200, height:18},
valueBinding: SC.Binding.oneWay('App.someController.selectedTuesdayDate'),
classNameBindings: ['isToday:date-is-today'],
isToday: function(){
var comptuesday = this.get('value');
var comptoday = SC.DateTime.create().toFormattedString('%A, %d %b');
if (comptuesday === comptoday) {
return 'date-is-today';
} else {
return 'normal-date';
};
}.property('value'),
}),
Probably not the shortest way or beautiful syntax, but it works, any further suggestions for better syntax?
Highcharts does a great job auto-formatting dates both on the x-axis and in tooltips. Unfortunately I need a custom function to format my y-values, and /plotOptions/line/tooltip/pointFormat accepts only a format string and not a function, so I have to set /tooltip/formatter instead. How do I get hold of the formatted date (e.g. Oct'13 or 20. Oct) as shown on the x axis? I don't seem to have access to point.key from there, only the raw millis value.
http://jsfiddle.net/9Fke4/
You can use dateFormat()
tooltip: {
formatter: function() {
return '<b>' + Highcharts.dateFormat('%b\' %d',this.x) + ':</b> ' + this.y;
}
},
http://jsfiddle.net/9Fke4/1/
FWIW, this was answered in a Highcharts issue on Github
formatter: function() {
var tooltip = this.series.chart.tooltip,
item = this.point.getLabelConfig(),
header = this.series.chart.tooltip.tooltipFooterHeaderFormatter(item);
return header + this.y;
}
Corresponding fiddle:
http://jsfiddle.net/9Fke4/12/
If you are using a shared series:
tooltip: {
formatter: function (tooltip) {
var header,
s = [];
$.each(this.points, function(i, point) {
if(header == null) {
var config = point.point.getLabelConfig();
header = tooltip.tooltipFooterHeaderFormatter(config);
}
s.push(point.y);
});
return header + s.reverse().join('<br>');
},
shared: true
}
conver the raw milliseconds to a date object using
var currentDate = new Date (tome in milliseconds)
in the tootip/formatter function you have defined.
this will give you good control over the date. you can use currentDate.getMonth(), getDate(), getDay(), etc methods to get the information you want from that date.
build a string with the above info and return.
I hope this will help you.
The solution I ended up with is to pre-format the y-values and store them as part of the series data; the pre-formatted values can then be referenced from the tooltip headerFormat and pointFormat, where they can be used along with {point.key}, which contains the auto-formatted date (and which is not available when providing a custom tooltip formatter):
http://jsfiddle.net/uG3sv/