search

apexcharts / ng-apexcharts

ng-apexcharts is an implementation of apexcharts for angular. It comes with one simple component that enables you to use apexcharts in an angular project.
MIT License
310 stars 78 forks source link

plotOptions property seems to have no effect in Angular #257

Open mw108 opened 1 year ago

mw108 commented 1 year ago

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 1 year ago

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 4 months ago

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 4 months ago

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

caboodal commented 4 months ago

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.

mw108 commented 4 months ago

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>