CODEWITHSUNDEEP
javascripthighchartscoffeescript
zero-divisor
zero-divisor

Reputation: 610

Highcharts.js: Strange rendering of stacked graph

I have some issues with my stacked highcharts graph:

$('#container').highcharts(
  chart:
    type: 'column'
  credits:
    enabled: false
  title:
    text: ''
  xAxis:
    lineColor: '#afafaf'
    lineWidth: 1
    tickWidth: 0
    labels:
      enabled: false
    opposite: true
  yAxis:
    min: 0
    max: 4
    gridLineWidth: 0
    lineWidth: 0
    labels:
      enabled: false
    title:
      text: ''
    reversed: true
  legend:
    enabled: false
  tooltip:
    enabled: false
  plotOptions:
    column:
      borderWidth: 1
      borderColor: '#FFFFFF'
      pointPadding: 0
      groupPadding: 0
      animation: false
      stacking: 'normal'
      dataLabels:
        enabled: false
  series: [
      color: '#FF0000' # red
      data: [1,2,3]
    ,
      color: '#0000FF' # blue
      data: [0,2,1]
  ]
)

The graph is fiddled here (I've chosen a small container size to show pixel differences).

  1. blue graph has no upper border (this can be fixed by inserting a third series with all zeroes)

  2. middle column of the blue graph overlaps with the right column, if container width has (3n+1)px (n being any integer)

  3. the red part of the middle column is 1px smaller in height than the blue part, if container height has an even number of pixels

My workarounds are pretty ugly, especially for (2) because the problematic container widths depend of the number of columns, which may vary in my application.

Any ideas? Are these bugs in highcharts.js or have I done something wrong in my highcharts configuration?

Upvotes: 0

Views: 128

Answers (1)

Torstein Hønsi
Torstein Hønsi

Reputation: 2197

  1. The border overlaps with the grid line or axis line, which is intended
  2. This is issue https://github.com/highslide-software/highcharts.com/issues/2694. We'll look into it.
  3. This is a consequence of rounding to the nearest full pixel in order to render sharp graphics.

Upvotes: 1

Related Questions