score:0
use updatechart function and call chart.reflow() inside that function
scope.updatechart = function(){
scope.chart.reflow();
}
call updatechart method every 30 seconds using any refresh mechanism
score:0
i tested it, and it is working very well:
chart-tab is div, and contains high chart div, so you first need to define two divs, first for containing the chart('chart-container')
, and second the container of 'chart-container' which is 'chart-tab', then one library must be added('resizesensor')
for adding the event for 'chart-tab' div on-change , and here is the function as follows:
new resizesensor($('#chart-tab'), function(){ if(chart){ var wid = document.getelementbyid('chart-tab').clientwidth; var hei = document.getelementbyid('chart-tab').clientwidth; chart.update({ chart: { width: wid, height: hei } }); } });
score:0
you can make use of chart.update function from anywhere across your project.
highcharts.charts.foreach(function (chart) {
chart.update({ chart: { width: some value } }, true, true, true);
})
score:0
in my case it was a loading issue that caused the chart container to be too narrow. if you make use of jquery then load your chart like this
$(document).ready(function() {
let chart = highcharts.stockchart('chart-container', {
[...]
}
}
score:0
for me using angular it was solved by moving setting the option in ngafterviewinit!
score:2
if you do not provide width
property to the chart, it should automatically get the width of the container.
so just remove the width from the chart and give the container width: 100%
and that should work.
if you want a specific width, just change the container width to a specific size. the chart should still be 100% of that size. jsfiddle
example:
html
<div id="container">
<div id="chart"></div>
</div>
js
var chart = new highcharts.chart({
chart: {
renderto: 'chart',
margin: 0,
height: 200,
defaultseriestype: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
css
#container {
width: 100%;
height: 200px;
}
score:4
the issue with highcharts already reported here. to handle this we can do something like mentioned above. i was also facing the same problem so i have solved it by using
window.dispatchevent(new event('resize'));
after rendering my chart like :
this.chartdata={
... //some required data object to render chart
}
highcharts.stockchart('divcontainerid', this.chartdata, function (chart) {});
window.dispatchevent(new event('resize'));
score:5
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
}
}]
});
score:5
just simply add css
.highcharts-container{
width: 100% !important;
}
.highcharts-root{
width: 100% !important;
}
score:8
i solved it by
window.dispatchevent(new event('resize'));
upd:
- remove width and height attributes.
- 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/
score:9
set minpadding
and maxpadding
to 0, see: http://jsfiddle.net/skv9d/3/
score:17
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.
score:17
the issue is because of jquery ui. after rendering your chart call this code to reflow the chart. this fixed my problem
chart.reflow();
Source: stackoverflow.com
Related Query
- Highcharts - issue about full chart width
- HighCharts full width issue
- Highcharts legend title border not full width
- Highcharts legend spread out to full width
- Issue with last column width in Highcharts
- Highcharts chart width issue on lazy loading of stylesheet
- Highcharts cloud issue with data source when duplicating chart
- Inconsistent columns width issue in highcharts
- Highcharts v7.1.2 width scaling issue when using css transform scale
- Highcharts error 19 issue when adjusting container width that chart displays in
- Highcharts width exceeds container div on first load
- Maximum bar width in Highcharts column charts
- Styling bar colors in Highcharts with a gradient issue
- Fixed y-axis label width in Highcharts
- jQuery UI Tabs and Highcharts display/rendering issue
- Highcharts data series issue with ajax/json and PHP
- Highcharts Solid Gauge Width
- Highcharts Pie Chart ignores percentageDecimals tooltip setting and has floating point inaccuracy issue
- set width of chart, highcharts
- Get Highcharts width
- Highcharts - HTML tooltip & datalabels render issue
- Library duplication issue using Highcharts in Jaspersoft Studio
- Stop HighCharts increasing width of line on hover
- Highcharts multi y-axis min-max issue
- Column width in Highcharts when combined with spline
- Highcharts - Issue with negative values when displaying multiple axes
- highcharts and canvg scaling issue
- Issue Dynamically Changing HighCharts Chart Title
- Highcharts spans beyond bootstrap column width when implemented as an angular directive
- Highcharts + Bootstrap .table-responsive issue
More Query from same tag
- Modify the size of the tickPositions in HighCharts
- Highcharts - Should Is use data labels or annotation or something else and how?
- *Highchart* Disable Chart Title and display when Download/Print
- How to align the xaxis tick mark center
- How to display percentage along with Count value in Pie chart Using Higcharts Plugin?
- Get Value of visibility of series
- highcharts map Zoom by a single click
- HighCharts: align rotated multiline label
- HIghmap colorAxis filter
- How can I format the Highcharts gantt chart to be a dashed line instead of a solid line?
- Highcharts - choosing the legend size
- Display Data with Xvalues correctly in Highcharts
- Adding a slider to a High Charts Treemap
- Highchart Solid Gauge Chart make one end straight/normal
- Dynamically added Highcharts series with min and max
- How to get data from multiple tables of MySQL DB and manuplate it using PHP to display graphs?
- highcharts - Custom legend - sending the name of the filter to a php file
- How to plot incomplete series with highchart
- How can you combine multiple graphs and control with one range selector with Highcharts?
- Highcharts : Display static Y axis labels from array when series data is null , else auto generated label
- fix a number of labeles on xAxis highcharts
- Changing backgroundcolor of tooltip for a specific data point in Highcharts
- Javascript/Jquery/Gantt Highchart : On clicking over a task progress pop-up should get open
- How to adjust the spacing of grid lines in highcharts
- Add new series to category highcharts
- Highcharts setData on pie chart not working
- How to hide single point bar in serie
- Use classic mode instead of styled mode in Highcharts with Angular
- How to change color of bar in column chart with different level of percentage in highcharts
- Best way to add different colours based on conditions to bargraphs plotted with Highcharts.js