score:59
You will need to set the xAxis.ordinal
property to false
, this is true
by default. True
value indicates the points should be placed at fixed intervals w.r.t space (pixels), and False
changes points to be placed at fixed intervals w.r.t. time
xAxis: {
ordinal: false
}
score:0
It is possible to zoom your chart using HighCharts JavaScript library. The property that you should set is zoomType
Decides in what dimentions the user can zoom by dragging the mouse. Can be one of x, y or xy. Defaults to "".
Here you can see an exmaple here. In order to zoom a specific place, hold the mouse left button and select the area you want to zoom.
HTML code:
<div id="container" style="height: 400px"></div>
JavaScript code:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
Also, a "Reset zoom" button is automatically shown on zoom event and it's easy to manipulated what part of the chart will be shown when it is pressed.
Anyway, for more information and examples of zoom settings, event and the button you should refer to "Highcharts Options Reference" here. Just enter "zoom" in the search.
As to your other question: "How to make the StockChart linear" according to HighStock API the default type of the chart is linear. What is happening here is caused by the area option that you have set in the series property. Just remove in like this and you will get your linear chart:
$(function() {
var chart2 = new Highcharts.StockChart({
chart: {
renderTo: 'chart2'
},
rangeSelector: {
selected: 0
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'val',
data: chart_arr
}]
});
});
Source: stackoverflow.com
Related Query
- Highstock highcharts irregular data gets wrong x-scale
- Highcharts Time Data With Irregular Intervals In Wrong Order
- HTML table as data source for highstock charts using highcharts
- Highcharts : Showing wrong color in data series
- Highcharts - Global configuration with common code and unique data & Headings
- Highcharts 3d bar chart data labels position is wrong
- highcharts gets my hour time wrong
- Highstock Highcharts date time data on Xaxis
- How to process csv data (datetime) month, week, day, hour in highstock highcharts
- Wrong data display when i set multiple series type in highstock chart
- Highcharts display label for pie chart using html table as data source
- Same data in HighCharts and HighStock
- Include additional highcharts source data in angular2 app
- Highstock weird y-axis scale difference in same data dual series
- Strange character in the Highstock source code
- Highcharts - Highstock chart showing double line on hovering data points to show tooltip
- Loading string data from table gets parsed as Date on Chrome - Highcharts
- Highcharts series visibility with csv data source
- Highcharts / Highstock datetime null data connected even with connectNulls: false
- How to change line color when loading static csv data into Highcharts Highstock graph?
- Dates not displaying correctly in Highcharts plot with irregular time data
- How to have multiple highcharts with different series data in vuejs without repeating code
- Big data amounts with Highcharts / Highstock (async loading)
- Irregular time data in highcharts
- highcharts x-axis is displaying the wrong data
- Using a flask variable as data source for highcharts
- Highcharts Highstock How to Plot OHLC and Line Charts from One Set of Embedded CSV Data Using Series Map Tools?
- Highcharts plotOptions.pie.dataLabels.formatter gets called multiple times for same data
- Error: Data source must be a URL for refresh | console error | javascript | Highcharts
- Highcharts cloud issue with data source when duplicating chart
More Query from same tag
- How to draw fibonacci retracement in highcharts
- How to disable a highchart chart completely
- How can i enable bootstrap tooltip in highchart
- X-axis alignment for Columnrange
- How to make highcharts-ng horizontal bar chart responsive
- Highcharts Y Axis overlay while re-rendering with React
- Filtering legend of a Highcharts by only visible series only in Export
- Data label position
- Issues with series.data in highcharts
- Caveats of highcharts-ng
- Highcharts Image Renderer Auto Height
- how to update Large tree map without redrawing chart?
- Highcharts - linear chart hidden in combination of graphs
- Highcharts. Marks on grid lines
- Highchart Combination Chart Area Range not displaying on chart but line chart works
- Highcharts renderer in websharper
- ajax call does not fire jquery code
- How to use this highchart map in reactJS
- Highcharts not displaying in jEditorPane
- Remove "G" from linear colorAxis in highmaps
- how to COUNT explode imploding data with comma?
- Highchart negative time
- Highcharts JS - share legend color between pie charts
- Is it possible to insert javascript charts into a JavaFX application
- Turning off point markers does not appear to work for Highcharts-ng
- Highcharts using Directives in AngularJS
- how to customize the tooltip in solid gauge in highchart
- Highcharts - Rails array includes empty date entries
- How to set the dynamic value from a text box to the graph using Highcharts?
- Highstock - How can i display the open, high, low, close in the line or area charts tooltip