responsive fontasize in apex chart data labels

Question

Hello everyone I am trying to chang font size on the labels on mobiles only because I have a pie and on mobile the label size too big and looks wonky. My current setting for the style of the data labels is this

          style: {
            fontSize: "15px",
            fontFamily: "DM sans",
            fontWeight: "light",
            
          },
          formatter(val, opts) {
            let labelIndex = [50, 15, 5, 5, 2.5, 12.5, 10];
            const name = opts.w.globals.labels[opts.seriesIndex];

            return [name, labelIndex[opts.seriesIndex] + "%"];
          },
          
        },

I know I should add the responsive part somewhere I tried different scooping and place to stick it but works nowhere wondering if im doing something wrong

responsive: [{
            breakpoint: 500,
            options: {
              style: {
                fontSize: "10px",
                fontFamily: "DM sans",
                fontWeight: "light",
              },
            },
        }],
    ```

score 0 · Answer 1 · answered May 25 '23 at 02:57

responsive should be added at the top level, in options, at the same level as dataLabels. Then its different options should have the same structure as the global options they are overriding, specifying at each level only those options that are different from the global options.

An example structure (of course, partial):

const options = {
    dataLabels:{
        style: {
            fontSize: "15px",
            fontFamily: "DM sans",
            fontWeight: "light",    
        },          
    },
    responsive:[{
        breakpoint: 500,
        options:{
            dataLabels:{
                style:{
                    fontSize: "10px"
                    // only options that are changing are needed  
                }
            }
        }
    }]
}

Here's a fiddle example.

responsive fontasize in apex chart data labels

1 Answers1