Apexcharts.js: Apex charts dataLabel styling is not working

Created on 20 May 2020  路  4Comments  路  Source: apexcharts/apexcharts.js

Codepen

I want to add a style for those dataLabels.

donut-datalabels

I tried out this as mentioned in the docs

options : {
...
 dataLabels: {
  enabled: true,
  enabledOnSeries: undefined,
  formatter: function (val, opts) {
      return val
  },
  textAnchor: 'middle',
  distributed: false,
  offsetX: 0,
  offsetY: 0,
  style: {
      fontSize: '14px',
      fontFamily: 'Helvetica, Arial, sans-serif',
      fontWeight: 'bold',
      colors: undefined
  },
  background: {
    enabled: true,
    foreColor: '#fff',
    padding: 4,
    borderRadius: 2,
    borderWidth: 1,
    borderColor: '#fff',
    opacity: 0.9,
    dropShadow: {
      enabled: false,
      top: 1,
      left: 1,
      blur: 1,
      color: '#000',
      opacity: 0.45
    }
  }
  },
...
}

both style and background are not working !!

bug datalabels pie

Most helpful comment

hello @junedchhipa It's not really clear if that is a bug or a new feature ?

According to the doc. it seems that this should be working so this issue seems like a bug to me. If that's the case, shouldn't this issue stay open till the bug is addressed and merged ?

Thanks

All 4 comments

It seems background for the pie/donut labels doesn't work in pie/donut charts.

For the forecolors, you can try

dataLabels: {
  style: {
    colors: ['#111', '#555', '#999']
  }
}

@junedchhipa styles colors is working. (only colors).
what to do to change the background color,borderRadius,add icons or links ?!

As I said, background isn't working for pie/donut data-labels.
It will be addressed soon.

hello @junedchhipa It's not really clear if that is a bug or a new feature ?

According to the doc. it seems that this should be working so this issue seems like a bug to me. If that's the case, shouldn't this issue stay open till the bug is addressed and merged ?

Thanks

Was this page helpful?
0 / 5 - 0 ratings

Related issues

artfulrobot picture artfulrobot  路  3Comments

piyushSinghalDemo picture piyushSinghalDemo  路  3Comments

ismaildervisoglu picture ismaildervisoglu  路  3Comments

jlil picture jlil  路  3Comments

frlinw picture frlinw  路  3Comments