question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ApexCharts not showing until I switch to landscape

See original GitHub issue

I’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:open
  • Created 2 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
lapisanlangitcommented, Sep 28, 2022

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

      setTimeout(() => {
                     this.chartOptions = {
                     ......
                     ......
                    }

      }, 1000);

        `
0reactions
tom-kotlarcommented, Apr 13, 2022

I have a similar issue with the Angular app: I am loading data from API. “apexcharts”: “^3.33.1”, “ng-apexcharts”: “^1.5.12”

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found