Highcharts - Issue About Full Chart Width

Highcharts - issue about full chart width

Chart's width is taken from jQuery.width(container), so if you have chart in some hidden tabs or something similar, width will be undefined. In that case default width and height are set (600x400).

Highcharts chart width issue on lazy loading of stylesheet

When you load css you can add onload event handler. So only then show the chart:

  this.linkRef.onload = () => this.showChart();

Here is your changed example:
https://stackblitz.com/edit/clarity-theme-switch-highchart-problem-1-wzqfaz?file=app%2Fapp.component.ts

Highcharts 's width is not correctly rendered at a hidden div

Try reconstructing your JS into like this:

$(function () {
    $('#btn').on('click', function () {
        $('#wrapper').show(function () {
          .....<highcharts code here>...
        });
    });
});

You can refer to this fiddle.

Issue in width of the chart

The chart seem to be redrawn/resized on a window resize event so you could trigger that event after toggling the sidebar.

$('#toggle-button').click(function() {
    $('body').toggleClass('toggle-sidebar');
    $(window).resize();
})

Demo jsFiddle

set width of chart, highcharts

Wrap your charts in a container and this will give you the flexibility to adjust the chart size when your screen changes.

Also provide a width to your wrapper and make it float to the left so that charts are placed side by side.

Here's an example: http://jsfiddle.net/ZrTux/9/

.chart-wrapper {
    float: left;
    padding-bottom: 40%;
    position: relative;
    width: 45%;
}

Highcharts: Chart does not resize properly by making the screen smaller

This should be done with just CSS... no resizing functions.

try adding position:absolute to your chart css property

The new css for #chart would look like this:

#chart {
    display: table-cell;
    position:absolute;
    width:50%;
}

I think this is the effect you want.

Check my Fiddle

note: I removed all resizing Javascript

---

Follow Up:

If you need to resize Highcharts on window resize with animation, you can do it with this syntax.

$(window).resize(function() {
    height = $(window).height()
    width = $(window).width() / 2
    $("#chart").highcharts().setSize(width, height, doAnimation = true);
});

I think this is more what you wanted using the Highchart setSize method with animation instead of CSS)

Fiddle

Hightcharts chart not resizing to fill space

Changing your HTML/CSS to have a width & min-width will fix this issue.

<div id="chart10_18" style="display: none; width: 100%; min-width: 100%;" class="graph"></div>

Your fiddle is updated here

---

Related Topics