How to resize with the latest code. The examples now use
chart = $('#theChart').highcharts({
Instead of newing a HighStockChart
chart = new Highcharts.StockChart({
I am not sure if that new way assigning chart variable is working though AND chart.setSize is definitely no longer working. I use to have this resize code...
$(window).resize(function () {
var height = getHeight();
console.log('fit new div container size, width='+$("#theChart").width()+' height='+height+' windowH='+$(window).height());
chart.setSize($("#theChart").width(), height, false);
});
which breaks on calling setSize. The width of my chart automatically changes but the height no longer changes anymore. I tried setting the height on the div on resize but that did not work at all. How to dynamically change the chart size to fit in the window but have a min-height as well if collapsed to far.
(My zoom panel also completely broke as well...is there a good example for that as I now need to add that back).
thanks,
Dean
You can still call chart = new Highcharts.StockChart(options) to create charts.
However now $("#container").highcharts(options); returns jQuery object, not Highcharts chart. To get chart from created id use: $("#container").highcharts(); (empty highcharts())
At the newest version you can still use first construction:
http://jsfiddle.net/L6hpm/
chart = new Highcharts.StockChart({
chart:{
renderTo:'container'
},
I second solution you can use:
http://jsfiddle.net/NbHj9/
var chart = $('#container').highcharts();
chart.setSize(100,100);
Why not use this:
var chartOptions = {
chart: {
renderTo: '[id of div]',
},
xAxis:{
},
...
series:{
},
};
var chartName = new Highcharts.chart({chartsOptions});
This should definitely work for you....just use chartName.setOptions() to set the size
Related
I use reflow = true to make sure my chart fit the width of the container div on resizing the window, so the XAxis will also change.
But when export, different size charts exported as the same size, and the XAxis are not as same as shown.
demo: https://jsfiddle.net/8zb9k5j6/
Is there any way to solve this? Thanks for your help
For example:
Full-screen, my XAxis is (4.Dec, 20.Dec, 3.Jan, 31.Jan, 14.Feb, 28.Feb)
Full-screen
When export as PNG(or whatever), my XAxis is (4.Dec, 20.Dec, 3.Jan, 31.Jan, 14.Feb, 28.Feb), that's what I want.
Full-screen-export
When I zoom out of the browser, the size of the chart will also decrease, my XAxis is (Dec'21, Jan'22, Feb'22)
small-size
When export as PNG(or whatever), my XAxis is (4.Dec, 20.Dec, 3.Jan, 31.Jan, 14.Feb, 28.Feb), that's not what I want, I want (Dec'21, Jan'22, Feb'22).
small-size-export
The chart export function renders the chart from initial - any changes, like zoom, extremes changes are not applied to the chart config. If you want to apply those changes you will need to add custom logic in the load event, like:
chart: {
events: {
load() {
const chart = this;
if (chart.renderer.forExport) {
console.log('aaply custom changes')
}
}
}
},
Demo: https://jsfiddle.net/BlackLabel/wfua8rye/
API: https://api.highcharts.com/highcharts/chart.events.load
I have a column chart, which has category labels Yes, No, Don't Care in xAxis. I also have two buttons which, when clicked, changes to a bar chart or vice versa. See the picture:
However, when changed to bar chart, the labels on yAxis are, from top to bottom, Don't Care, No, Yes. This new order is odd to users. I hope to still keep Yes, No, Don't Care (top to bottom) on the yAxis in the bar chart.
When a button is clicked, I have the following code for changing to bar chart:
var chart = code for find the chart object
chart.inverted = true;
chart.xAxis[0].update({}, false);
chart.yAxis[0].update({}, false);
chart.series[0].update({
type: 'bar'
});
The following code is for changing to column chart:
var chart = code for find the chart object
chart.inverted = false;
chart.xAxis[0].update({}, true);
chart.yAxis[0].update({}, true);
chart.series[0].update({
type: 'column'
});
How can I get the Yes, No. Don't care (top to bottom) order in the bar chart?
Thanks!
See the fiddle here
$("#bar").click( function (){
var chart = $('#container').highcharts();
// Added code to share the fiddle
});
I am just starting out with Highstock and I want to provide our users with the option of toggling the connection of the null data points via a button. Here is how I have tried to solve it: jsFiddle
// create the chart
var chart = new Highcharts.StockChart({
[...]
plotOptions : {
series : {
connectNulls : false // default
}
},
[...]
});
// Toggle connect nulls
var connectNulls = true;
$('#connectNulls').click(function() {
chart.plotOptions.series.connectNulls = connectNulls;
connectNulls = !connectNulls;
});
But it has no impact on the graph. All the examples I've found so far concerning toggling on chart configuration are doing dynamic manipulation on the series via the update method, but for the connectNulls I guess this is not possible.
I can always repaint the graph from scratch but I want to avoid this if possible. Say if one user has zoomed into the graph, repainting would cause the zoom to be lost.
Any suggestions?
You can use series.update() and then modify this param.
http://jsfiddle.net/vsmn60gL/3/
I'd like to be able to be able to dynamically toggle the presence of the Highstock navigator and allow the chart to expand into the vertical space it occupied.
I've tried simply toggling chart.userOptions.navigator.enabled but it has no effect.
This thread explains how to use .hide() and .show() methods to conceal the individual components of the navigator and scrollbar, but these use visibility:hidden so the space does not become available for the chart. However, using .css({display: 'none'}) works, but the series itself has no .css() method, and I've been unable to find a way of removing the series from just the navigator.
Does anyone know a method to achieve what I want?
Thanks.
In short: it's not supported to hide navigator in real time. The best way would be to destroy chart and create new one with disabled navigator.
Other solution is to use workaround provided by Sebastian Bochan. Then you will need to update manually yAxis.height, for example: http://jsfiddle.net/dJbZT/91/
$('#btn').toggle(function () {
chart.yAxis[0].defaultHeight = chart.yAxis[0].height;
chart.xAxis[0].defaultHeight = chart.xAxis[0].height;
chart.yAxis[0].update({
height: 500 - chart.plotTop - 35
}, false);
chart.xAxis[0].update({
height: 500 - chart.plotTop - 35
});
chart.scroller.xAxis.labelGroup.hide();
chart.scroller.xAxis.gridGroup.hide();
chart.scroller.series.hide();
chart.scroller.scrollbar.hide();
chart.scroller.scrollbarGroup.hide();
chart.scroller.navigatorGroup.hide();
$.each(chart.scroller.elementsToDestroy, function (i, elem) {
elem.hide();
})
}, function () {
chart.yAxis[0].update({
height: chart.yAxis[0].defaultHeight
}, false);
chart.xAxis[0].update({
height: chart.xAxis[0].defaultHeight
});
chart.scroller.xAxis.labelGroup.show();
chart.scroller.xAxis.gridGroup.show();
chart.scroller.series.show();
chart.scroller.navigatorGroup.show();
chart.scroller.scrollbar.show();
chart.scroller.scrollbarGroup.show();
$.each(chart.scroller.elementsToDestroy, function (i, elem) {
elem.show();
})
});
There's another way to do this: reduce the chart height by the navigator's height, and set chart.reflow to false to prevent the Y-axis from adapting to the new chart height (try setting it to true in the fiddle -- notice the flicker when you show / hide the navigator?).
I've added this answer to the other thread, and the demo is here: http://jsfiddle.net/dJbZT/148/ (credits to Sebastian Bochan for the original answer).
I'm not sure when highcharts added this ability via options, but this worked for me:
var chart = $('#graphContainer').highcharts();
chart.options.navigator.enabled = !chart.options.navigator.enabled;
$('#graphContainer').highcharts(chart.options);
I am trying to get a simple axis update to work through a button on highstocks, with the plan of "hiding" a data series/yaxis out of view when you hit a button, and then reducing the chart's height by that amount. For the life of me I just cannot get the button to work. If I manually put the setting of "top: -300" into the second y axis it works. Where is this going wrong?
jsfiddle:
http://jsfiddle.net/abbike18/Ww5Tg/3/
var chart = $('#container').highcharts();
$('#hide').click(function() {
chart.yAxis[1].update({
top: -300
});
chart.setSize(chartHeight = chartHeight -100);
});
First of all, you create variable chart before chart is initialized. Move that line inside the button, will be better. Second, you didn't created chartHeight variable anywhere. Last thing, is to redraw chart only once (in setChart function), so disable redraw for yAxis.update().
See working demo: http://jsfiddle.net/Ww5Tg/4/
And code:
var chartHeight = 500;
$('#hide').click(function() {
var chart = $('#container').highcharts();
chart.yAxis[1].update({
top: -300
}, false);
chartHeight -= 100;
chart.setSize(null, chartHeight);
});