score:20
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
.
score:0
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>
})
score:1
add this
const Highcharts = require('highcharts/highstock');
comment this if you have
// import Highcharts from 'highcharts';
change xAxis to like this
xAxis : {
categories: [],
min:0,
max:9,
scrollbar: {
enabled: true
}
}
score:3
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"
Source: stackoverflow.com
Related Query
- How to make highcharts scrollable horizontally when having big range in x-axis
- Javascript Highcharts v3.0.5 - How to hide Y Axis Title when using multiple Y Axis
- How to change axis label size when exporting in Highcharts / Highstock
- How to specify a range of data when using HighCharts with <table>?
- How to make the Y Axis values not start from 0 in highcharts? How to display forcefully display the last category data on X axis in HighCharts ?
- How to decrease sensitivity of automatic axis adjustment in Highcharts when dragging points
- How to make highcharts with dynamic datetime range with monthly interval
- How do I plot the x axis line using Highcharts when pegged at 0?
- highcharts how to make x and y axis starting on the same zero using categories on yAxis
- How to make Highcharts color axis as thresholds instead of gradual?
- How to represent a point which is outside range of x and y axis in highcharts
- How to set point in highcharts when x axis and y axis has data as text values?
- How to make Highcharts to use all the colours when replotting? (it is repeating colours unnecessarily)
- Highcharts how to only plot if x axis is having value greater than 0?
- Highcharts: when having multiple columns for the same X axis value, how can I get 1 tooltip per column?
- How to get points information when hovering over axis labels in highcharts using custom-events library?
- How to fix formatting of axis labels in Highcharts when surrounding the contents with div?
- Highcharts : How to increase marker radius based on the value range in Y axis in Scatter Graph?
- How to make Highcharts default pie not show when Angular page loading
- How to let x axis title still show on the bottom when setting fontsize attribute in Highcharts
- How to create a column range chart in Highcharts using range and navigator functions?
- How to make highcharts default to 0 for missing data
- how to set the interval of points on Y - Axis highcharts
- How replicate the value of Y Axis on both sides of the axis in Highcharts
- Highcharts - set maximum range for yAxis but keep axis dynamic within that range
- Highcharts how to change x axis options
- Highcharts - How to start x axis from an arbitrary value
- how to make highcharts pie datalabels always in center of each slice?
- HighCharts box-plot: how to make it horizontal
- How to add space between chart and axis in highcharts
More Query from same tag
- Custom button next to exporting overlaps on the To: of the range picker
- Gradient in column highcharts
- How to set the last point's position in Highcharts
- How to add Indicators in High Stock Candle Stick Chart with Angular 5.0?
- Why can't I get individual bar colors in a candlestick chart in highstocks.js for more than 55 bars?
- How to create seriesfor Highcharts from JSON data to use
- Highcharts - Highlight / Shade date range
- Trouble showing results with pie highchart
- How to display Multiple Highchart in single page
- Staged labels for xaxis with zero values
- Risk HeatMap using Highcharts
- Highstocks rounding values, and range not accurate for more then two hours of viewing
- How can I graph two sensor data values with Highcharts?
- Highcharts afterAnimate in combination with xAxis max
- HighStock Charts not Working over SSL ie https
- highcharts live update and YII framework
- How to align HTML span at center of highchart donut graph with responsive design?
- HighCharts not working on Safari but works fine on Firefox and Chrome
- R highcharter() global thousand separator?
- is supportablerange type graph in Highchart?
- Highcharts modify stacklabels dynamically
- How to add random ticks on a line chart at a specific position
- How to add space between chart and axis in highcharts
- How to display last 7 days data
- Highstocks: How to define the span colors of a line instead of the individual line color
- Hide one serie's dataLabel on Highcharts
- Highcharts Navigator with a table?
- Adding a string to highcharts tooltip based on a separate data series
- Show HTML special characters as is
- Highchart Combochart Rendered Wrong