apexcharts/ng-apexcharts

plotOptions property seems to have no effect in Angular

Closed this issue · 6 comments

mw108 commented

These two examples are equal. While the plotOptions property works as expected in the JavaScript version, it seems to be ignored in the Angular version.

JavaScript:
https://codepen.io/mw-108/pen/ExeRYer

grafik

Angular:
https://codesandbox.io/s/gifted-cloud-pxvvc3?file=/src/app/app.component.ts

grafik

mw108 commented

No feedback here in over 1 month. Am I the only one having this issue? Is it an issue with ngApexCharts or an error on my side?

caboodal commented

I've tried and I can't get the plotOptions to have any impact either and I cannot turn off the dataLabels either and I'm using the latest 1.9.0 release

mw108 commented

I abandoned Apexcharts and switched to Apache ECharts: https://echarts.apache.org/en/index.html

caboodal commented

after a bit more investigation I realised that I wasn't binding the option classes to the chart!

So to clarify everything is working perfectly.

  • 👍1
mw108 commented

I see, you are right. Wow. Such a simple pitfall. 🙈

<div id="chart-wrap">
  <apx-chart
    id="chart"
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [plotOptions]="chartOptions.plotOptions" <-- Add this
    [dataLabels]="chartOptions.dataLabels"
    [markers]="chartOptions.markers"
    [title]="chartOptions.title"
    [fill]="chartOptions.fill"
    [stroke]="chartOptions.stroke"
    [colors]="chartOptions.colors"
    [legend]="chartOptions.legend"
    [yaxis]="chartOptions.yaxis"
    [xaxis]="chartOptions.xaxis"
    [tooltip]="chartOptions.tooltip"
    [grid]="chartOptions.grid"
    [autoUpdateSeries]="false"
  ></apx-chart>
</div>
github-actions commented

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.