How to make highcharts scrollable horizontally when having big range in x-axis

问题

I am generating my x-axis and y-axis data dynamically and displaying highcharts, but the chart becomes messy when the x-axis range is high with small intervals.

How do I make highcharts to make normal horizontally scrollable graph?

Here is what I am using right now:

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

//CODE FOR HIGHCHARTS JS
function makeChart() {
    $('#container').highcharts({
        chart: {
            type: 'line',
            marginRight: 130,
            marginBottom: 100
        },
        title: {
            text: 'Banana',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: banana.com',
            x: -20
        },
        xAxis: {
            categories: xlist
        },
        yAxis: {
            title: {
                text: 'No. of C'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: 'C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: $("#repoSelector option:selected").text(),
            data: ylist
        }]
    });
}

回答1:

Two ways to achieve a scroll bar.

Option 1

You will need to use highstock.js and instead of rendering a stock chart, you have to render a highchart.

Then enable the scroll bar

  scrollbar: {
        enabled: true
    }

Check the API for scroll bar and related operations here.

Here I have fiddled an example.

Option 2

Try setting min & max attributes to the x-axis.

xAxis: {
            categories: [...],
            min: 0,
            max:9
}

Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories. find the fiddled example here.

回答2:

To enable scrollbar in x-axis, try this

xAxis: {
  categories: xlist,
  min: 0,
  max: 4,
  scrollbar: {
        enabled: true
  },
  },

Check the jfiddle here: https://jsfiddle.net/BhavyaAprajita/zja90wf2/1/

Also, make sure that you import the highstock library

src="https://code.highcharts.com/stock/highstock.js"

回答3:

Use

require('highcharts/highmaps') instead of require('highcharts') in imports<br>
@NgModule({<br>
    ...<br>
   imports: [<br>
    BrowserModule, <br>
     ChartModule.forRoot( <br>
      require('highcharts/highmaps')<br>
      ],<br>
})

来源：https://stackoverflow.com/questions/16706068/how-to-make-highcharts-scrollable-horizontally-when-having-big-range-in-x-axis

标签

Highcharts