I'm trying to add % after the 100 or -100 yAxis in the chart above.
I tried to add the % symbols like so:
quotes.data.frequency_counts[i].negative = Math.round(negative * -1)+'%';
quotes.data.frequency_counts[i].positive = Math.round(positive)+'%';
However got an error saying strings are not allowed as data_points, which makes sense, but still hoping there is a way to get the % sign displayed so the user knows what we are showing them.
This isn't my app, however it is a HighChart that is editable in plunker: http://plnkr.co/edit/8mDQD1?p=preview
You can use a label formatter for that:
yAxis: {
title: { text: 'Temperature (Celsius)' } ,
labels: {
formatter: function() {
return this.value + '%';
}
}
}
Here's an updated (now nonsensical) Plunker showing the changes
Related
I'm looking to hide the null label from my chart here. I'm working in Actuate/Opentext designer. I originally needed for there to always be 28 column slots but there isn't always data points for each of those days. If there isn't- the label on the x-axis is showing up as null. I'd like to hide this label but can't figure out how. Even changing the color of it to white but I can't get around how to manipulate this label to never show when null. Here is an image of what I'm trying to remove from my chart and the current code
beforeGeneration: function(options) { options.xAxis.max = 27
//You can change options here.
options.plotOptions = {
series: {
pointWidth: 25, //size of column
pointPadding: 0.25, //size of padding between each bar
groupPadding: 0 //padding between each value groups in x axis
}
};
},
Use formatter function:
xAxis: {
...,
labels: {
formatter: function(){
return this.value || '';
}
}
}
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter
I have requirement to extend date label formatting to show time period beside date when value is measured.
You can see on image how it should look.
Any way to achieve this by using format function of Highchart API?
EDIT: I need implementation without using third party solutions, since I need to embed solution into jasper report.
Thanks
As an alternative to use 'grouped categories' plugin, you can create additional xAxis labels by Highcharts. SVGRenderer.
chart: {
events: {
load: function() {
var chart = this,
ticks = chart.xAxis[0].ticks,
xy;
Highcharts.objectEach(ticks, function(tick) {
if ((tick.pos + 2) % 3 === 0) {
xy = tick.label.xy;
chart.renderer.text('date', xy.x, xy.y + 20)
.attr({
'align': 'center'
})
.add();
}
});
}
}
},
Live example: http://jsfiddle.net/BlackLabel/f7c54zop/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
I am working on the Trellis chart highchart.
and I have categories values with long names,for that categories value should start from first letter but its showing from the middle of the
categories value to last,
actual title: Appleswwwwwwwwwwwe
now its showing like: wwwwwwwwe
But i need to show the title with ellipsis like
Appleswee...
xAxis: {
categories: ['Appleswwwwwwwwwwwe', 'Pewerttttttttttttars', 'Oranges', 'Bananas'],
labels: {
enabled: i === 0
}
},
Here is the jsFiddle
can anyone help me ?
Its working, I used below code from this jsfiddle
label : {
formatter: function () {
var text = this.value,
formatted = text.length > 25 ? text.substring(0, 25) + '...': text;
return formatted ;
}
}
I have a bar chart similar to the one shown in this link.
I wanted to add two features to this bar chart
Instead of numbers, I want the tooltip title to display the sum of the count displayed by the bars at the given cordinate.
I wanted to display the % in the tooltip instead of the actual count.
Could someone please help me with this?
This can be done by configuring tooltip.format.title:
tooltip: {
format: {
title: function (index) {
return totals[index]
}
and tooltip.format.value:
value: function (value, ratio, id, index) {
return d3.format("%")(value / totals[index])
}
}
}
And as you can see above, you need to calculate total values of your data groups:
var totals = [390, 500, 500, 900, 550, 550]
See example.
I was having a hard time trying to figure out how to center labels on a datetime x-axis in Highcharts without using categories and tickPlacement (since tickPlacement only works on categories).
My axis was dynamically created so I could not simply set an x-offset or padding, as this would cause axes of different intervals to look strange.
After messing around with the config options I think I may have found a solution using the x-axis formatter and some css / jquery noodling in the Highcharts callback. See my answer below.
The trick is to use the x-axis labels object like this:
xAxis: {
type: 'datetime',
labels: {
useHTML: true,
align: 'center',
formatter: function () {
//using a specific class for the labels helps to ensure no other labels are moved
return '<span class="timeline_label">' + Highcharts.dateFormat(this.dateTimeLabelFormat, this.value) + '</span>';
}
}
You can see that the formatter will keep whatever dateTimeLabelFormat has been set by the user or default.
Then have a callback that does something like this:
function (chart) {
var $container = $(chart.container);
var $labels = $container.find('.highcharts-axis-labels .timeline_label');
var $thisLabel, $nextLabel, thisXPos, nextXPos, delta, newXPos;
$labels.each(function () {
$thisLabel = $(this).parent('span');
thisXPos = parseInt($thisLabel.css('left'));
$nextLabel = $thisLabel.next();
nextXPos = $nextLabel.length ? parseInt($nextLabel.css('left')) : chart.axes[0].left + chart.axes[0].width;
delta = (nextXPos - thisXPos) / 2.0;
newXPos = thisXPos + delta;
if ($nextLabel.length || $(this).width() + newXPos < nextXPos) {
$thisLabel.css('left', newXPos + 'px');
} else {
$thisLabel.remove();
}
});
});
In short, this will go through each label and determine how much it should be moved over (using css) by calculating the distance between itself and the next label. When it reaches the the last label, it either moves it over using the end of the axis for the calculation or removes it if it won't fit. This last part is just the decision I decided to make, you can probably choose to do something else like word wrap, etc.
You can see the jsfiddle here
Hope this helps some people. Also, if there are any improvements it would be great to see them here.
Based on the existing answer, there is a much simpler solution that also works when resizing the browser window (or otherwise forcing the chart to redraw), even when the tick count changes: http://jsfiddle.net/McNetic/eyyom2qg/3/
It works by attaching the same event handler to both the load and the redraw events:
$('#container').highcharts({
chart: {
events: {
load: fixLabels,
redraw: fixLabels
}
},
[...]
The handler itself looks like this:
var fixLabels = function() {
var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
});
labels.css('margin-left',
(parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left'))) / 2
);
$(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};
As you see, the extra wrapping of labels is unnecessary (at least if you do not have more than one xAxis). Basically, it works like this:
Get all existing labels (when redrawn, this includes newly added ones). 2. Sort by css property 'left' (they are not sorted this way after some redrawing)
Calculate offset between the first two labels (the offset is the same for all labels)
Set half of the offset as margin-left of all labels, effectively shifting them half the offset to the right.
Remove the rightmost label (moved outside of chart, by sometimes partly visible).