I'm trying to be able and set Height automatically when resizing the screen sizes.
Currently, I am setting the size to be with default size when it *loads*, but then I'm resizing the screen the height of the graph keeps the same and does not change.
I am returning the object (Highcharts is set as global usage), I don't know how to change it for using the 'setSize' method or 'reflow()' as it looks like my solution for this.
I am using Vue and TS in my client code.
I'm using Chart as follows:
Code: Select all
const miniHeight = () => {
if (window.innerHeight < 1080) {
return 280;
} else {
return 340;
}
};
const expandedHeight = () => {
if (window.innerHeight >= 900 && window.innerHeight < 1020) {
return 450;
} else if (window.innerHeight >= 1020 && window.innerHeight < 1080) {
return 400;
} else if (window.innerHeight >= 1080) {
return 500;
}
};
Code: Select all
return {
chart: {
type: "spline",
height: expanded ? expandedHeight() : miniHeight(),
spacingTop: 20,
spacingRight: 30,
animation: false,
},
title: {
text: "",
align: "left",
x: 80,
y: 10,
style: {
display: "block",
fontSize: "14px",
paddingLeft: "80px",
fontWeight: "500",
fontFamily: "Gotham",
color: "black",
},
},
xAxis: {
crosshair: {
width: 1,
color: "#CCCCCC",
},
plotOptions: {
spline: {
marker: {
enabled: false,
symbol: "circle",
},
},
series: {
events: {
legendItemClick: function() {
return false;
},
pointPlacement: "on",
pointStart: 0,
},
},
},
series: [{
name: "Facing",
data: dataSeries.mainGraph,
color: "#6A7EC7",
lineWidth: 3,
yAxis: 0,
visible: true,
},
],
};
Tom