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.
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'm trying to use highchart, working with colums.
My series data are some hours.
For example, if my data is 23.75, it means 23:45 hours.
I would like to use my 23.75 data so that my colums are in the right place, but the little text on top of my column displays "23:45".
Is it possible ? I can't find the right option to do this.
Thanks in advance !
you can format data label values by formatter
dataLabels: {
enabled: true,
formatter: function () {
return this.y; // you can update datalabel values here
}
}
Found it !
stackLabels: {
enabled: true,
formatter: function() {
return this.total // custom text label here
}
}
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
Using Highcharts to display a bar chart, is there a built-in way to link legend items to categories rather than to series? As such I would see a chart with a bunch of bars, and when I click a legend item it would show or hide just the bar(s) associated with a single category.
Thanks
There is not a built in way.
You can fake it in a number of ways, however.
One way is to use a separate series for each category, set grouping to false, dummy the x values to hover around the actual category value.
plotOptions: {
series: {
grouping: false,
pointRange: 0.2
}
},
series: [{
name: 'Group A',
data: [[-0.25,5],[0,7],[0.25,6]]
}]
Example:
http://jsfiddle.net/jlbriggs/x1cdz54r/
In the end, I found no out-of-the-box way to do this. But I found a solution that works, as follows:
correlate each bar with a single series (see fiddle referenced above)
in legendItemClick:
manually show or hide the series associated with the clicked-on legend item
given visibility of each category, recompute the indices of each visible category and update each visible bar series data[0].x with the new index of the category with which it is associated (use point.update())
call xAxis.setCategories with a list of the categories you want to be currently visible
call xAxis.setExtremes with the new extremes for the category indices
Here is a very simple example of the above:
legendItemClick = function (e) {
var seriesClicked = e.currentTarget;
var chart = seriesClicked.chart;
var axis = chart.xAxis[0]
if (seriesClicked.visible) {
seriesClicked.hide();
chart.series[2].data[0].update( { x: 1 });
axis.setCategories(['Group A', 'Group C'], false)
axis.setExtremes(0, 1, true)
} else {
seriesClicked.show();
chart.series[2].data[0].update( { x: 2 });
axis.setCategories(['Group A', 'Group B', 'Group C'], false)
axis.setExtremes(0, 2, true)
}
return false;
}
And a fiddle: http://jsfiddle.net/dkent600/e6357a22/17/
Is it possible to combine the following?
Fiddle 1 (answered by mäksä) as a main template:
Single horizontal stacked bar with bar segments
Combined with the following features of Fiddle 2 (answered by aus_lacy):
Always visible on bar segments:
Data names (labels) (i.c. "apples", "pears",...)
Percentages (calculated if possible: "50%","50%",...)
Shown on mousehover:
Original data numbers (i.c. "15","15",...)
Series name/description (i.c. "Browser share")
Almost but not quite:
An example of a horizontal bar chart with "percentages" always shown, and "original data numbers" on mousehover can be found in Fiddle 3 (answered by jlbriggs), but there the "data names" are lacking, and I can't find a way to change the "series name". Further more: this is a horizontal bar chart, but this is not a single stacked one.
Any help would greatly be appreciated, many thanks.
Again it's a simple modification of the Highcharts attributes in particular this small snippet:
bar: {
dataLabels: {
enabled: true,
distance : -50,
formatter: function() {
var dlabel = this.series.name + '<br/>';
dlabel += Math.round(this.percentage*100)/100 + ' %';
return dlabel
},
style: {
color: 'white',
},
},
},
I think this snippet is what you are after?