0

I have got my SVG string from getSVG

let chartSVG = chart.getSVG({ ...options })

I am formatting it so it renders in React-PDF only problem I am getting now is the dataLabels for a variablePie will not resize, I have tried multiple options by searching online and none of them will resize them, they are too big, I managed to resize the variblepie chart. by changing the width and height in

 chart.getSVG({
      chart:{
            width:236,
            height:162,
        },
  ... })

I just can not get the text to resize...

I have attached an image of how it looks in my React-PDF

part of the svg has -

<text x="5" data-z-index="1" y="14" style="color: rgb(0, 0, 0); font-size: 5px; font-weight: bold; fill: rgb(0, 0, 0);">Wealth</text>

it just seems to ignore the font-sizes..

VariablePie

Aims
  • 21
  • 4

1 Answers1

0

Use the Highchats object instead of argument of callback (chart) as a reference:

Highcharts.charts[0].getSVG({
    chart: {
      width: 300,
      height: 300
    },
    plotOptions: {
      series: {
        dataLabels: {
          style: {
            fontSize: '6px'
          }
        }
      }
    }
  })

Demo: https://jsfiddle.net/BlackLabel/ywvr743o/

Related thread: https://github.com/highcharts/highcharts-angular/issues/262

EDIT:

React Demo: https://codesandbox.io/s/highcharts-react-demo-forked-v95dqj

magdalena
  • 2,657
  • 1
  • 7
  • 12
  • Thanks, I've tried it but it doesn't appear to change it, maybe it's react-PDF affecting it. it seems to just ignore the styles. – Aims Sep 07 '22 at 14:30
  • Hi, In my case everything seems to work correctly. I've edited my answer with react demo added. Regards! – magdalena Sep 08 '22 at 09:47
  • i think it's to do with React-PDF passing the highchart chart to that. :/ – Aims Sep 08 '22 at 11:06
  • Is the React-PDF neccesery in your project? You can easly export PDFs using export-server module. – magdalena Sep 08 '22 at 13:10
  • yes as I need to pass through other content from a backend – Aims Sep 08 '22 at 14:01
  • I understand. Unfortunately, since it's not due to the Highcharts issue, I am afraid I can't help you more. Regards! – magdalena Sep 09 '22 at 08:57