CODEWITHSUNDEEP
javascripthighcharts
Ramyani
Ramyani

Reputation: 1039

Inconsistent columns width issue in highcharts

I've created a column chart width 2 series data with 61 entries in each series. By default the columns width should be similar but it is getting inconsistent.

Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Monthly Average Rainfall' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: ["May 12", "Jun 12", "Jul 12", "Aug 12", "Sep 12", "Oct 12", "Nov 12", "Dec 12", "Jan 13", "Feb 13", "Mar 13", "Apr 13", "May 13", "Jun 13", "Jul 13", "Aug 13", "Sep 13", "Oct 13", "Nov 13", "Dec 13", "Jan 14", "Feb 14", "Mar 14", "Apr 14", "May 14", "Jun 14", "Jul 14", "Aug 14", "Sep 14", "Oct 14", "Nov 14", "Dec 14", "Jan 15", "Feb 15", "Mar 15", "Apr 15", "May 15", "Jun 15", "Jul 15", "Aug 15", "Sep 15", "Oct 15", "Nov 15", "Dec 15", "Jan 16", "Feb 16", "Mar 16", "Apr 16", "May 16", "Jun 16", "Jul 16", "Aug 16", "Sep 16", "Oct 16", "Nov 16", "Dec 16", "Jan 17", "Feb 17", "Mar 17", "Apr 17", "May 17"], crosshair: true }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, plotOptions: { column: { pointPadding: 0, borderWidth: 0, groupPadding: 0.08 } }, series: [{"name":"series1","data":[265,244,226,268,259,306,329,378,291,344,263,356,385,228,202,262,331,272,315,249,181,277,292,396,234,181,185,210,202,189,197,233,270,351,378,222,384,450,304,182,180,236,540,173,135,142,207,267,206,261,249,247,161,253,239,221,143,144,187,197,109],"color":"#1f497d"},{"name":"series2","data":[199,203,146,161,134,143,155,184,168,183,149,187,168,162,218,192,144,153,164,150,140,174,195,151,148,112,149,163,141,142,151,163,147,132,240,191,180,159,139,132,157,171,166,185,130,141,304,173,151,134,127,172,147,134,142,161,127,113,150,147,57],"color":"#8eb4e3"}] });.

http://jsfiddle.net/ynkq44oj/

Upvotes: 0

Views: 340

Answers (2)

Ramyani
Ramyani

Reputation: 1039

Using crisp: false option solved the issue. But in some cases the chart looks hazy.

http://jsfiddle.net/ynkq44oj/1/

Upvotes: 0

morganfree
morganfree

Reputation: 12472

Set series.crisp to false.

crisp: Boolean

When true, each column edge is rounded to its nearest pixel in order to render sharp on screen. In some cases, when there are a lot of densely packed columns, this leads to visible difference in column widths or distance between columns. In these cases, setting crisp to false may look better, even though each column is rendered blurry. Defaults to true.

http://api.highcharts.com/highcharts/plotOptions.column.crisp

plotOptions: {
  column: {
   pointPadding: 0,
   borderWidth: 0,
   groupPadding: 0.08,
   crisp: false
  }
},

example: http://jsfiddle.net/ynkq44oj/4/

Upvotes: 1

Related Questions