I have implemented a highchart within a chart object in HTML, with CSS defining the height and width of the chart object. Initially, upon first render, the chart has a height of 290px. However, when I click on the tab again, the chart stretches to a height of 308px. Subsequent clicks do not change the height, which remains at 308px. Here is the code snippet:
HTML:
<div class="content">
<chart class="chartContainer" [options]="myChart" type="chart"
style="display: block;">
</chart>
</div>CSS:
.chartContainer{
position: absolute;
height: 100%;
z-index: -1;
overflow-y: hidden;
background-color: rgba(244, 244, 244, 0.98);
padding-top: 25px;
padding-bottom: 30px;
margin: auto;
}Typescript:
addChart(){
this.myChart = {
chart: {
type: 'spline',
backgroundColor: 'rgba(255, 255, 255, 0.0)',
reflow: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
title: {
text:""
},
responsive: false,
xAxis: {
tickInterval: 5
},
yAxis: {
visible:false,
resize: {
enabled: false
}
},
plotOptions: {
series: {
marker: {
enabled: true,
radius: 4,
symbol: 'cicle'
},
lineWidth: 1,
dataLabels: {
enabled: true,
color: '#8C88FF',
style: {
fontWeight: 'none',
textOutline: 'none',
fontSize: '15px',
fontFamily:'Trebuchet MS'
}
},
enableMouseTracking: false
}
},
series: [{
showInLegend: false,
name: 'High',
color: '#8C88FF',
data: [[5, 120], [7, 140], [8, 135], [9, 120], [10, 120],
[12, 135], [15, 160],[20, 135],[21, 135], [22, 135]]
},
{
showInLegend: false,
name: 'Low',
color: '#8C88FF',
data: [[5, 100], [7, 120], [8, 120], [9, 115], [10, 110],
[12, 125], [15, 140],[20, 130],[21, 125], [22, 125]]
}]
}
console.log("Chart created");
}