Search code examples
javascripthighchartssalesforce-lightning

Hide Space in a stack of bar in HighChart

I'm newbie to highchart and creating a chart. But there is strange blank space coming in a bar not able to figure out how to resolve that. Given the image in pattern-fill there is a space in all three bars. enter image description here

Styles:

color: {
   pattern :{
    path: {
       d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
       strokeWidth: 5
       },
       stroke:'#33AD8E',
       color:'#33AD8E'
    }

 }
Solution

  • You need to set width and height for the pattern:

    color: {
  pattern: {
    path: {
      d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
      strokeWidth: 5
    },
    width: 10,
    height: 10,
    ...
  }
}

    Live demo: http://jsfiddle.net/BlackLabel/mkh5rg9x/

    Docs: https://www.highcharts.com/docs/chart-design-and-style/pattern-fills