HighCharts full width issue

highcharts reflow
highcharts min width
highcharts pie chart width
highcharts line chart width
highcharts column chart width
highcharts resize to container
highcharts redraw on resize
highcharts small size

Im trying to make my rendered chart fill 100% of the parent div with no success. Is there any way I can remove the gap on the left and right sides?

http://jsfiddle.net/sKV9d/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart',
        margin: 0,
        width: 300,
        height: 200,
        defaultSeriesType: 'areaspline'
    },    

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],    

        marker: {
            enabled: false
        }
    }]
});

If you remove the options width: 300, height: 200 like this:

    var chart = new Highcharts.Chart({
chart: {
    renderTo: 'chart',
    margin: 0,
    defaultSeriesType: 'areaspline'
},    

...

it will fill automatically the container.

Highcharts not loading to width of the parent div · Issue #5783 , Expected behaviour Chart loads in the same size as the parent. Have used width: 95% and height:75vh to the div in which highchart loads  I’m using Highcharts column chart and I want it to be 100% width responsive chart. The container is a simple <div> with no any formatting. When the document loads, the chart is always fixed width 600x400px size. If I resize window or switch to another browser tab, the chart fills the width and becomes responsive full width chart just like I wanted.

The issue is because of jquery UI. after rendering your chart call this code to reflow the chart. This fixed my problem

chart.reflow();

Highcharts width exceeds container div on first load, <rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" [b]width="1920"[/b] but second chart not working fine its still exceeds container div on first load. I am having problem to set the highcharts to complete width of the parent div container in Salesforce1 Lightning app when locker service is enabled. I haven't given any specific width in the highcharts configuration, but only to the parent div comprising the highcharts. But the highcharts is not being rendered as full width of the container.

Set minPadding and maxPadding to 0, see: http://jsfiddle.net/sKV9d/3/

Width failure, how to solve it., I mean, the chart take the width that she wanted, so doesnt care if you put it component which is auto-rendered and is breaking the whole thing, It may be general issue with a chart that has "display:none" for the container. notice the 2 images with the inspect tool. The green shaded area has a width of 1081px, while the orange line has a width of 1133px. We've looked into CSS to make sure it wasn't an issue, but have essentially deduced it to an unknown issue with highcharts.

I solved it by

window.dispatchEvent(new Event('resize'));

UPD:

  1. remove width and height attributes.
  2. add into .css the following code in order to adjust chart block to 100% of #container:
chart { width: 100%; height: 100%; }

2a. another way is - in case if not possible to define container size during "design" time you can reflow chart after chart load (i.e. call chart.reflow(); ):

chart: {

    events: {
        load: function(event) {
        **event.target.reflow();**
      }
    }
},

See example http://jsfiddle.net/yfjLce3o/

Multiple graphs drawn full width issue., Multiple graphs drawn full width issue. Thu Dec 08, 2016 12:26 pm. When multiple highcharts drawn, charts will not fit to its parent graph container. where parent  I build PDF reports with PHP, JS and wkhtmltopdf that include highcharts. The reports&#39; width is calculated automatically by wkhtmltopdf. The largest element on the page is considered 100% a

Try this :

var height= $("#container").height();
var width= $("#container").width();

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart',
        margin: 0,
        width: width,
        height: height,
        defaultSeriesType: 'areaspline'
    },    

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],    

        marker: {
            enabled: false
        }
    }]
});

Chart Width issue with wkhtmltopdf, to output my web page + JS code to PDF. It's all working fine, except that the HighChart is not full width (of the page). Is this a known issue? Chart loads in the same size as the parent. Have used width: 95% and height:75vh to the div in which highchart loads. <div id="g1" style="width: 95% ;height:75vh" ></div>.

Chart not getting resize on parent <div> width change, Hi Team, Today we encountered issue with chart reflow when chart container changed in width. Please find the below attached image. All code belongs to the poster and no license is enforced. JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code. Links. Bug tracker Roadmap (vote for features) About Docs Service status

Resize chart according to div height and width, If I reduce the height and width of the div, the chart is being truncated. Code: Select all <div id="container" style="height: 600px; width: 700px"></  Welcome to the Highcharts JS (highcharts) Options Reference. These pages outline the chart configuration options, and the methods and properties of Highcharts objects. Feel free to search this API through the search bar or the navigation tree in the sidebar.

chart.width, The pixel width of the outer chart border. To set an image as the background for the entire chart, set a CSS background image to the container element. Responsive chart This demo shows how breakpoints can be defined in order to change the chart options depending on the screen width. All charts automatically scale to the container size, but in this case we also change the positioning of the legend and axis elements to accomodate smaller screens.

Comments
  • As highcharts doc said: An explicit width for the chart. By default (when null) the width is calculated from the offset width of the containing element. Defaults to null. it works
  • Some example when you created your chart elsewhere: $("#chartDiv").highcharts().reflow();
  • Just a heads up that I had a similar issue when rendering charts inside a React component's componentDidMount. Axis labels were overflowing the chart and were only partially visible until I added chart.reflow() as the last call in the method.
  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
  • Yes, you're right, it's not a full answer. I found another one, and I will add it as comment for author.
  • Does not look like 100% to me, there is a white space of 3px still there.
  • Still has the gaps unfortunately. The chart itself (svg) is full width, it just seems the data itself has a gap.
  • this is work, but my tooltip become error couse this css