width set to 100% not working

Question

jonasalberttan opened this issue a year ago · comments

I don't if this is a bug or not. But when I tried to set the width to 100% in the chartOptions, it was not working.

chart: {
type: "line",
events: {},
height: 100,
width: "100%",
},

jonasalberttan · Answer 1 · Sat Apr 15 2023 02:16:46 GMT+0800 (China Standard Time)

Meanwhile, I tried to set the width to null and it is now working.

width: null,

Jakub Szumiński · Answer 2 · Mon Apr 17 2023 14:59:47 GMT+0800 (China Standard Time)

This is not related to the Highcharts-Vue wrapper, but to Highcharts.

From the API I deduce that you can use percentage-strings for the chart.height option, but not to chart.width:

(altough I understand that this is not very clearly described.)

So, the solution could be:

Set width to null so that the width is automatically calculated based on the parent container & set the parent container to a fixed-width in %
Set width to fixed number of px: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/width/

Let me know if that helps!

Jakub Szumiński · Answer 3 · Thu Apr 20 2023 19:47:33 GMT+0800 (China Standard Time)

Closing as it is not a Highcharts-Vue bug.