bacujlui
Posts: 8
Joined: Mon Apr 01, 2024 10:54 am

Render svg template using Highcharts.Renderer

Hi

I have a task to render Stacked column chart. And over each column I need to render other column with specific height. In some case same height as column, in some cases less.
If the height of child column is not the same as parent column we just color child column with red.
If the height of child column is not the same as parent column we color child column with red + svg hatching.

I've tried to do this using series.data.dataLabel. But there is 1 limitation, if the height of DataLabel too small, Highchart move it from the edge of column.
So the only option left for me is Highchart.Renderer

CodeSandbox. Sorry, you need to log in to edit the code.
https://codesandbox.io/p/sandbox/highch ... %3A76%2C59

Svg example
https://www.svgviewer.dev/s/8DZFOoB6

Question: how to render provided svg to it will looks like on images, on resize as well, doesn't matter how tall the column is.
Thanks!

Expected result
https://ibb.co/qyY8cLX
https://ibb.co/YbSN8x0
kamil
Posts: 56
Joined: Mon Mar 04, 2024 8:26 pm

Re: Render svg template using Highcharts.Renderer

Hi there,
Thank you for contacting us. Have you considered using Highcharts pattern fill module? Here's a demo that shows how to apply a pattern to column chart: https://jsfiddle.net/BlackLabel/mg8q372j/

Best regards!
bacujlui
Posts: 8
Joined: Mon Apr 01, 2024 10:54 am

Re: Render svg template using Highcharts.Renderer

I don't need to apply svg template on a column
I need to apply svg template on chart.renderer.rect that rendered on column
kamil
Posts: 56
Joined: Mon Mar 04, 2024 8:26 pm

Re: Render svg template using Highcharts.Renderer

I've changed the code so that your SVG is positioned correctly:

Code: Select all

   
    chart.renderer
      .image(
        getImgUrl(columnWidth, columnHeight),
        column.shapeArgs.x + chart.plotLeft,
        column.shapeArgs.y + chart.plotTop,
        columnWidth,
        columnHeight
      )
      // rest of the rendering chain...
 
However, it seems that there's something wrong with your getImgUrl function. Although, we pass the correct dimensions:

Code: Select all

    console.log("Column width: ", columnWidth, "Column height: ", columnHeight);
   // output: Column width:  109 Column height:  110
The column is not 109 px wide.

Please let us know if you have any further questions.

Return to “Highcharts Usage”