score:3

Accepted answer

simply change default value of cropthreshold property from 50 to the value equal or higher than the number of the points in series.

api reference:
http://api.highcharts.com/highcharts/plotoptions.bar.cropthreshold

example:
https://jsfiddle.net/5gjb0cxa/

score:0

it looks like duplicate values are only being plotted once. because you are forcing in the number of data points in the series, this is why you see blanks.

one way to have the chart display the way you want is like this: https://jsfiddle.net/wf_4/vynww178/1/

what i have done here is removed the text from each series point and added it as y-axis categories which the data will be aligned to.

highcharts.chart('container', {
  chart: {
    type: 'bar',
    marginleft: 150
  },
  title: {
    text: 'most popular ideas by april 2016'
  },
  subtitle: {
    text: 'source: <a href="https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api">uservoice</a>'
  },
  xaxis: {
    type: 'category',
    title: {
      text: null
    },
    min: 0,
    max: 4,
    scrollbar: {
      enabled: true
    },
    ticklength: 0,
    categories: ['gantt chart',
      'autocalculation and plotting of trend lines',
      'allow navigator to have multiple data series',
      'implement dynamic font size',
      'multiple axis alignment control',
      'stacked area (spline etc) in irregular datetime series',
      'adapt chart height to legend height',
      'export charts in excel sheet',
      'toggle legend box',
      'venn diagram',
      'add ability to change rangeselector position',
      'draggable legend box',
      'sankey diagram',
      'add navigation bar for y-axis in highstock',
      'grouped x-axis',
      'reactjs plugin',
      '3d surface charts',
      'draw lines over a stock chart',
      'data module for database tables',
      'draggable points',
      'gantt chart',
      'autocalculation and plotting of trend lines',
      'allow navigator to have multiple data series',
      'implement dynamic font size',
      'multiple axis alignment control',
      'stacked area (spline etc) in irregular datetime series',
      'adapt chart height to legend height',
      'export charts in excel sheet',
      'toggle legend box',
      'venn diagram',
      'add ability to change rangeselector position',
      'draggable legend box',
      'sankey diagram',
      'add navigation bar for y-axis in highstock',
      'grouped x-axis',
      'reactjs plugin',
      '3d surface charts',
      'draw lines over a stock chart',
      'data module for database tables',
      'draggable points',
      'draggable legend box',
      'sankey diagram',
      'add navigation bar for y-axis in highstock',
      'grouped x-axis',
      'reactjs plugin',
      '3d surface charts',
      'draw lines over a stock chart',
      'data module for database tables',
      'draggable points',
      'draggable legend box',
      'sankey diagram',
      'add navigation bar for y-axis in highstock',
      'grouped x-axis',
      'reactjs plugin',
      '3d surface charts',
      'draw lines over a stock chart',
      'data module for database tables',
      'draggable points'

    ]
  },
  yaxis: {
    min: 0,
    max: 1200,
    title: {
      text: 'votes',
      align: 'high'
    }

  },
  plotoptions: {
    bar: {
      datalabels: {
        enabled: true
      }
    }
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'votes',
    data: [
      1000,
      575,
      523,
      427,
      399,
      309,
      278,
      239,
      235,
      203,
      182,
      157,
      149,
      144,
      143,
      137,
      134,
      118,
      118,
      117,
      1000,
      575,
      523,
      427,
      399,
      309,
      278,
      239,
      235,
      203,
      182,
      157,
      149,
      144,
      143,
      137,
      134,
      118,
      118,
      117,
      157,
      149,
      144,
      143,
      137,
      134,
      118,
      118,
      117,
      157,
      149,
      144,
      143,
      137,
      134,
      118,
      118,
      117
    ]
  }]
});
<div id="container" style="height: 1000px; min-width: 320px; max-width: 600px; margin: 0 auto"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

score:1

adding to wf4 answer, for the drilldown part you can check this one.


Related Query

More Query from same tag