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
- Highcharts upgrade to 8.1.2 not working with Angular 8
- How to select array from Highchart.series?
- Remove DataPoint from x-axis redraw Issues
- Showing user the script is loading
- DIsplay Ajax data in Highchart js
- How to pass laravel/PHP function to JS
- Highcharts: alone point hard not visible with marked disabled
- How to de-couple and do dependency injection with highcharts-ng
- highcharts change series color when data is dynamically inserted
- Waterfall Highchart to start some of the columns in between the series with 0 y-axis
- Hiding items in highchart legend
- Rendering Highcharts Chart in Two Container
- How to access Highcharts stock tooltip data in Vue?
- How to fix hidden dataLabel in highcharts?
- Problems with Highcharts exporting server: Encoding and quality
- Using HTML with Vue or how to adapt it to Vue.js
- Drilldown in two steps, multiple choice in Highcharts
- Showing up highchart after submitting form in other file
- How to get the period value from SMA technical indicators in highcharts?
- Highcharts rose diagram with json
- How to enable dates that match with the data in rangeselector?
- How to render partial view for HighCharts and pass parameter in MVC?
- Highcharts columnrange remove spacing from data in other categories
- How do I make a Highcharts timeline where the labels don't overlap and none are hidden?
- Knockout.js calling method outside of view model
- Prevent Highcharts to redraw Axis' scale
- Is there a way to cap Highchart's Gauge at the max
- getJSON different line options
- Highchart extend x-axis and then update y-axis data
- Highstock - display number of week