apexchart-canvas div not addressable with "scoped" styles

[800response]

CodeSandbox

https://codesandbox.io/s/vue-apexcharts-scoped-styles-issue-dd5xn

Explanation

App.vue has:

<style>
.apexcharts-canvas {
     border: 1px solid #f00;
}
</style>

Chart.component.vue has:

<style scoped>
.apexcharts-canvas {
  margin: auto;
  border: 1px solid #0f0 !important;
}
</style>

I would expect to see a centered radial chart with a green border. Instead, a left aligned radial chart with a red border is shown.

If I remove the the "scoped" attribute it produces the expected result. But this is a non-starter as I only want to make this kind of adjustment in one part of the app, not globally.

This appears to be a bug, but perhaps this is by design? If the latter then I will submit a feature request.

Thoughts?

[junedchhipa]

This is not a bug. Vue scoped styles don't get applied to elements generated with a third-party library. Maybe you can wrap it in some unique parent div and then style it.

[800response]

@junedchhipa, thanks for your response.

I tried to do that using: .example .apexcharts-canvas { ... } and .example > div > div { ... } and neither worked.

It would be extremely valuable to target the canvas div through local styles. Or, at a minimum, allow a style injection at the \<apexcharts> tag using a property. Would that be a worthwhile feature request?

[github-actions[bot]]

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.