Highcharts - resize legend on chart resize? - highcharts

Is there anyway to dynamically set a specific width of legend items when resizing the chart? I have some really long item names possible in the legend so I need to specify a width to force the text to wrap, but I would like to change the width when the width the chart changes. Thanks.

I found a better work around for this:
chart.legend.options.width = newwidth;
chart.legend.itemStyle.width = newwidth;
for(var index in this.chart.series) {
chart.legend.destroyItem(chart.series[index]);
}
chart.legend.render()

Generally it is not possible, but you can disable highcharts legend, and prepare your own div (positioned absolutely) which will include list of all series and click event. Simple example is available here
$legend = $('#customLegend');
$.each(chart.series[0].data, function (j, data) {
$legend.append('<div class="item"><div class="symbol" style="background-color:'+data.color+'"></div><div class="serieName" id="">' + data.name + '</div></div>');
});
$('#customLegend .item').click(function(){
var inx = $(this).index(),
point = chart.series[0].data[inx];
if(point.visible)
point.setVisible(false);
else
point.setVisible(true);
});
http://jsfiddle.net/N3KAC/10/
Than only what you need is adapt this to your chart by catching $(window).resize() function and resize element.

Related

Highcharts | Line height control for plot band labels in styled mode

I am looking to find a way to control line height for plot band labels in styled mode. The useHTML property doesn't work in my case as I need styles to persist in the downloaded PNG. I was looking for a solution similar to this.
I've tried adding something similar, but it completely broke my chart.
function (p) {
p.call(this);
const plotLine = this;
plotLine.label?.css(merge(this.options.label.style));
Here's a simple fiddle describing the issue, seems like no matter what is the font size the dy prop stays 15.
Appreciate if someone can help.
In this case, you need to wrap Highcharts.PlotLineOrBand.prototype render function. Check the following code and demo:
(function(H) {
H.wrap(H.PlotLineOrBand.prototype, 'render', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, ));
const label = this.label;
if (label) {
label.css({
lineHeight: label.alignOptions.style.lineHeight
})
}
});
}(Highcharts));
More about Extending Highcharts:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Demo:
https://jsfiddle.net/BlackLabel/nsg5abhq/

Position shared tooltip above the stacked columns

When using stacked columns, I would like the tooltip to be positioned above the stacked columns. Right now, the tooltip will appear above the hovered part of the column, like this:
I would like the tooltip to always appear above the stacked columns regardless of the hovered part, like this:
(source: i.ibb.co)
I know about the positioner method, but this function doesn't seem to receive the proper parameters for me to position the tooltip above the stacked columns. In particular I don't know how to properly get the coordinates of the hovered column, all I get is the global position of the cursor.
You can use the shared parameter for a tooltip:
tooltip: {
shared: true
}
Live demo: http://jsfiddle.net/BlackLabel/us4h659d/
API Reference: https://api.highcharts.com/highcharts/tooltip.shared
So I finally managed to do it using Axis.toValue() and Axis.toPixels() values:
https://api.highcharts.com/class-reference/Highcharts.Axis
For my solution to work you need to have a way to get the total value of a stacked column. There may be a way to do it using only the Highcharts object, but I don't like messing too much with the internals of Highcharts for compatibility reasons.
Here's what the positioner method could look like:
function positioner(labelWidth, labelHeight, point)
{
// Default position, assuming mChart is the Highcharts object
var chartY = point.plotY + mChart.plotTop;
var chartX = point.plotX + mChart.plotLeft;
// Move chartY above the stacked column, assuming getTotalColumnValue() exists
var category = Math.round(mChart.xAxis[0].toValue(point.plotX, true));
if(category in mChart.xAxis[0]['categories'])
chartY = mChart.yAxis[0].toPixels(getTotalColumnValue(category), false);
// Move tooltip above the point, centered horizontally
return {
x: chartX - labelWidth / 2,
y: chartY - labelHeight - 10,
};
}

Reveal.js with highcharts

I'm using reveal.js (http://lab.hakim.se/reveal-js/) together with Highcharts JS but i have problems with tooltips position. For example, if i use a line with the months on the x axis, when i put the mouse over the point in january the tooltip its ok, but when i put the mouse over december the tooltip shows me the october data. The tooltip for each month is displaced more and more.
You can see http://lideria.net/presentacion/index1.php to see the problem
This may be problem with Highcharts which us already reported here. Also there is suggested workaround: http://jsfiddle.net/highcharts/BD3R7/
reveal.js autoscales the viewport with a css zoom tag. If you inspect class="slides" div, you'll see something like this:
<div class="slides" style="width: 960px; height: 700px; zoom: 0.8331428571428572;">
Here the content (the chart) is scaled 80% of normal size and Highcharts loses it's ability to calculate positions properly if the chart is scaled outside of its control.
With that knowledge, a quick stack overflow search talks about the ability to force 'reveal.js` to not auto-scale content.
You must overwrite the normalize of the H.Pointer.prototype (referenced WRAPPING UP A PLUGIN). Add the following code to document.ready function (maybe somewhere else works, I guess). The reasons are:
reveal.js has separate ways when zoom>1 and zoom<1, e.g., zoom:1.25 and transform:scale(0.75).
So, when a section has several charts and zoom>1, must adjust e.chartX by e.pageX.
(function (H) {
H.wrap(H.Pointer.prototype, 'normalize', function (proceed, e) {
var e = proceed.call(this,e);
var zoom = Reveal.getScale();
if(zoom>1) {
var positionX = e.pageX - e.chartX;
var positionY = e.pageY - e.chartY;
e.chartX = Math.round((e.pageX - positionX*zoom)/zoom);
e.chartY = Math.round((e.pageY - positionY*zoom)/zoom);
} else {
e.chartX = Math.round(e.chartX/zoom);
e.chartY = Math.round(e.chartY/zoom);
}
return e;
});
}(Highcharts));

Wrong rendering of y-axis in polar charts

I need help with the y-axis of polar charts like spiderweb or windrose.
I've an application with an dashboard which contains some widget, each containing an iframe with an Highcharts chart.
Because these widgets are reziable, I've some javascript for resizing the container of the charts.
$(window).bind("resize", resizeChart);
function resizeChart() {
var width = $(document).width() - 55;
var height = $(document).height() - 60;
$("#container").css("width", width);
$("#container").css("height", height);
}
Some example: http://jsfiddle.net/CwnDw/
My problem is, that the scale of the y-axis often look very ugly. When the chart loads the y-axis has only one tick.
After resizing the chart to + 10 px, it contains no tick, and after resizing to the inital size, the y-axis renders with 5 ticks. I don't understand why.
In my example I only get these effect when I resize the chart from a small size to a bigger size very fast.
Is there a better way for resizing a chart? I tried the chart.setSize() function to, but no effect. Or: is there a way to rerender/recalculate the y-axis?
Thank you
Torben
I'm not sure about a redrawing method that would accomplish what you are looking for, but with my experience using Highcharts, I found it is best to specify tick positions to avoid any unexpected results.
Here is a link to Highchart documentation regarding yAxis: tickPosition
http://api.highcharts.com/highcharts#yAxis.tickPositions
There is a pretty good jsFiddle example there that should cover implementation.
Try this:
function resizeChart() {
var width = $(document).width() - 55;
var height = $(document).height() - 60;
$("#container").css("width", width);
$("#container").css("height", height);
setTimeout(function () {
chart1.setSize(
width,
height,
false
);
},10);
}
http://jsfiddle.net/9YFB8/2/

highcharts grouped chart using custom bar width with no pointPadding

Basically i want to use pointPadding with custom bar width (pointWidth) both at the same time. But i can't, here is my problem:
I want a chart with no-padding in the bars of one group when showing grouped chart. For this purpose i used pointPadding: "0" and it shows me exactly right chart. like:
if(chart_json.chart.defaultSeriesType=='column'){
if(chart_json.xAxis.categories.length >= 1 ){
chart_json.plotOptions.column.groupPadding = "0.05";
chart_json.plotOptions.column.pointPadding = "0.00";
}
}
var chart=new Highcharts.Chart(chart_json,startupObj.startupFunction);
chartObjArray.push(chart);
But when i set my custom width it adds some spaces in between bars of one group.
Actually i want to put max and min limit on bar width, but i can't find any support from Highchart library. So for this purpose when highchart generate the chart, if the generated chart bar width exceeds my max-limit i set it to my max-limit and same for lower limit.
if(chart_json.chart.defaultSeriesType=='column'){
if(chart_json.xAxis.categories.length >= 1 ){
chart_json.plotOptions.column.groupPadding = "0.05";
chart_json.plotOptions.column.pointPadding = "0.00";
}
}
var chart=new Highcharts.Chart(chart_json,startupObj.startupFunction);
chartObjArray.push(chart);
//set bar width
if(chart_json.chart.defaultSeriesType=='column' || chart_json.chart.defaultSeriesType=='bar'){
setChartBarMaxMinWidth(chart,chart_json);
}
setChartContainerWidth(chart_json,chart);
////************************************///////////////////
function setChartBarMaxMinWidth(chart,json){
var maximumBarWidth=70;
var minimumBarWidth=15;
chart_json=eval('('+json.chart_json+')');
for(var j=0;j<chart.series.length;j++){
var series=chart.series[j];
if (series.data[0].pointWidth > maximumBarWidth) {
chart.series[j].options.pointWidth = maximumBarWidth;
isMaxMin='MAX';
}
if (series.data[0].pointWidth < minimumBarWidth) {
chart.series[j].options.pointWidth = minimumBarWidth;
isMaxMin='MIN';
}
};
function setChartContainerWidth(chartOptions,chart){
// calculate # of bars
var numberOfBars=seriesGroupLength*categoriesLength;
// calculate container width
// var containerWidth=numberOfBars*43;
// get chart bar width
var containerWidth=numberOfBars*barWidth;
chart.setSize($(container).width(),$(container).height());
};
In setChartContainerWidth() i used highchart setSize() method to resize chart..
Thanks if someone can help me to remove spaces in between bars of one group.
Thanks
I used the spacingTop attribute to enforce a maximum pointWidth:
if (series[0].data[0].pointWidth > maximumBarWidth) {
this.options.chart.spacingTop = this.options.chart.height - (maximumBarWidth * series.length) - 30;
this.isDirtyBox = true;
this.redraw();
}
So if there is one Bar over a certain Width the spacing will be adjusted and the chart is drawn smaller.
This does not change the size of the container but keeps the bars beneath a certain size and your pointPadding and groupPadding will not be affected.
You will have to adjust the calculation of the spacingTop depending on your data structure and the size of your axis titles.

Resources