ApexCharts not showing until I switch to landscape
See original GitHub issueI’m implementing ng-apexcharts on my ionic project and following the instructions for my first chart I vreate my first chart and any error is shown on the terminal or the browser console, but the chart is hidden until i switch to lanscape or from landscape to portait or when i change the resolution of the emulator. Compiling the app on android native code, the same error is present.
<ion-content [fullscreen]="true">
<div id="container">
something
<apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart" [title]="chartOptions.title"></apx-chart>
something
</div>
</ion-content>
@ViewChild("chart", { static: false }) chart: ChartComponent;
public chartOptions: Partial<ChartOptions>;
chartData = [];
chartType = "bar";
public uuid: string;
public loading: boolean;
public nombre: string;
constructor(private route: Router,
private backend: BackendService,
private modalController: ModalController,
private auth: AuthService) {
this.loading = true;
let dataArray = [];
let dataLabel = [0,5,10,15,20,25,30,35];
this.chartOptions = {
series: [{
name: "My-series",
data: [1,2,2,42,35,23,6,26,2,7,2]
}],
chart: {
height: 500,
type: this.chartType
},
title: {
text: `My First ${this.chartType} Chart from xlsx file`
},
xaxis: {
type: "datetime",
categories: dataLabel
}
};
}
Issue Analytics
- State:
- Created 2 years ago
- Comments:5
Top Results From Across the Web
Responsive - ApexCharts.js
To test, if you are on desktop right now, resize the screen to see how this horizontal bar chart changes to a column...
Read more >ApexCharts not correct until resizing window - Stack Overflow
this is my first ever answer on stack overflow. The solution is very simple : you just need to add a :key="series.length".
Read more >ApexCharts card - A highly customizable graph card
Hi folks, I've built a new card to display some graphs in Lovelace :bar_chart::chart_with_upwards_trend:. It is in its early stage and is ...
Read more >Apexcharts resize issue - stackoverflow #55326858 - CodePen
document.getElementById("hide_" + obj).style.display = 'none';. 22. document.getElementById("show_" + obj).style.display = '';.
Read more >Charting in React with ApexCharts - LogRocket Blog
By default, Apex displays our charts in vertical orientation. You can render them horizontally by using the option.plotOptions.bar.horizontal ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
try to set width and height chart in object chartOptions, this is resolve my problem too
` this.chartOptions = { series: [ { name: “Desktops”, data: [] } ], chart: { height: 300, // => set this property width:300, //=> set this property type: “line”, zoom: { enabled: false } } }
or better solution give sitimeout function to chartOptions
I have a similar issue with the Angular app: I am loading data from API. “apexcharts”: “^3.33.1”, “ng-apexcharts”: “^1.5.12”