Search code examples
javascriptsvghighchartsantialiasing

Remove antialiasing on Highcharts curves

With HighCharts, I want to remove anti-aliasing on SVG curves.

So far, I'm using this :

$('path').each(function(i,j){$(j).attr('shape-rendering', 'crispEdges')})

And I was wondering if the was a better way, i.e. is there something implemented in Highcharts API ?

Solution

  • shape-rendering is a CSS property so you can set it for all paths using

    path {
    shape-rendering: crispEdges;
}

    Like this for instance.

    It's also inherited so if you set it on a parent or root element all the children get it.

    If you're working in SVG document then

    document.documentElement.setAttribute("shape-rendering", "crispEdges");

    might work for you.

    There is a highcharts shape-rendering suggestion you can vote for if you want this to be part of highcharts itself.