Change the height of Highcharts using JavaScript. By default, only the window is resized when the window is resized
We are using HighCharts in our application, and I have added a function to extend the full set of charts. I am modifying the styles and also using Javascript to change the height of the div.
However, nothing changes until you actually resize the browser window. Does anyone else have this problem?
<section id="highchart-container" ng-class="{'high-chart-expanded' : highChartMax}">
<highchart id="chart1" config="chartConfig" style="height:auto"></highchart>
</section>
ChartHeader area
function expandChartPanel() {
vm.chartMaxed = !vm.chartMaxed;
highChart = ScopeFactory.getScope('highChart');
if (vm.chartMaxed) {
highChart.highChartMax = true;
}
else {
highChart.highChartMax = false;
}
highChart.toggleChartSize();
}
HighChartDirective Scope
function toggleChartSize() {
var chart1 = document.getElementById("chart1");
if (vs.highChartMax) {
chart1.style.height = "100%";
} else {
chart1.style.height = "400px";
}
}
Styles (SASS)
.high-chart-expanded {
min-height: 100% !important;
max-height: 100% !important;
width: 100% !important;
height: 100% !important;
#highcharts-6,
#chart1,
.highcharts-background,
.highcharts-container {
min-height: 100% !important;
max-height: 100% !important;
width: 100% !important;
height: 100% !important;
}
}
HighChart chartConfig
ApiFactory.quotes(buildFullUrl(url)).then(function (data) {
var quote_data = formatQuotes(data, 'quotes');
// Create the chart
vs.chartConfig = {
options: {
legend: {
itemStyle: {
color: "#333333",
cursor: "pointer",
fontSize: "10px",
fontWeight: "normal"
},
enabled: true,
floating: true,
align: 'left',
verticalAlign: 'top',
x: 60
},
chart : {
zoomType: 'x',
events: {
load: function () {
// HighChart loaded callback:
broadcastChartloaded();
}
}
},
This is what I see when I comfort chartConfig
console.log('highChart.chartConfig = ', highChart.chartConfig);
source to share
Try it chart.setSize(width, height)
?
An example works here
UPDATE: for angular directive
To pull the chart object out of the directive, you can simply follow the jQuery route:
var chart = $('#theChart').highcharts();
chart.setSize(width, height);
Specifically for ng-highcharts users, here's how its recommended to pull the high-chart object by the author of the directive. The above method will work very well.
var chart = this.chartConfig.getHighcharts();
chart.setSize(width, height);
While you can do this anywhere in your controller / directive / service, I would recommend that you create a new service that returns this object and then inject it into your controller if you are strictly adhering to the angular design pattern, but if not only these two strings should work fine wherever you have access to the object chartsConfig
.
To reset the chart to be responsive , repeat this answer .
source to share