5

i am using the library apexCharts to build some charts in a project i`m working on.

This specific PieChart is loading the number of tries of a certain action, and it shows them in the side bar labels.

Recently i loaded a chart with a lot of tries and the container gained a scroll, i thought it would load all the tries, and by scrolling you would navigate throught them, but it doesn't show all of them..

Label container

I've been watching the responsive behaviour of the chart and in the 1300px > resolution size, it does show all the labels through the scroll.

these are the options of my apex chart code:

chartOptions: {
  chart: {
      width: '100%',
      height: 390,
      type: 'pie',
      toolbar: {
          show: true
      }
  },
  labels: chartData.labels,
  legend: {
      markers: {
          width: 26,
          height: 12,
          radius: 8,
      },
      position: chartOptions.legendPosition || "right",
  },
  theme: {
      monochrome: {
          enabled: true,
          color: '#537F23',
      }
  },
  title: {
      text: chartOptions.title,
      margin: 10,
      style: {
          fontSize:  chartOptions.titleSize || '25px',
          fontWeight:  'bold',
          color:  '#707070'
      },
  },
  responsive: [
      {
        breakpoint: 1400,
        options: {
              chart: {
                  width: '90%',
                  height: 417,
              },

        }
      }, {
          breakpoint: 800,
          options: {
              chart: {
                  height: 400,
              },
              legend: {
                  position: "bottom",
                  horizontalAlign: 'left',
              }
          }
      }, 

I tried to play around with the chart height, to no use. I think this may be a lib error.

Sugestions ?

thanks .

Pedro Ferreira
  • 301
  • 3
  • 11

0 Answers0