Размер шрифта радиальных диаграмм apexcharts

Я использую apexcharts на своем веб-сайте , У меня какой-то конфликт, кто-нибудь знает, как изменить размер шрифта значения, а метки поставить внизу, а значение поставить в центр

здесь код

JavaScript

var options = {
          series: [70],
          chart: {
          height: 350,
          type: 'radialBar',
        },
        plotOptions: {
          radialBar: {
            hollow: {
              size: '70%',
            }
          },
        },
        labels: ['Cricket'],
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

apexcharts
person core114    schedule 28.11.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Обратитесь к документации для форматирования меток данных и их соответствующих значений. Следующие свойства могут быть переопределены в вашей диаграмме options, чтобы установить размер шрифта и положение.

plotOptions: {
  ...
  dataLabels: {
    name: {  // label name, eg: "Cricket"
     ...
     fontSize: '<font size in px>' // default: 16px; change to preferred size
     offsetY: <position offset from top> // +ve for downward, -ve for upward direction> // default: -10; change to >120 to push the label down
    },

    value: {  // label value, eg: "70%"
      ...
      fontSize: '<font size in px>' // default: 14px; change to required size
      offsetY: <position offset from top> // default: +16; set to 0 to center the value
    }

  }
}

Вот CodePen с измененными выше настройками, чтобы установить метку внизу графика и значение по центру .

person Deepak Devanand    schedule 01.12.2020