Area chart with two data points. Full width - javascript

I got problems with an area chart to full the entire width when I have two datapoints. Here's a js-fiddle. http://jsfiddle.net/user1572526/dG2s5/1/
It has something to do with the min and max value on the xAxis.
xAxis: {
categories: ['2013', '2030'],
min: 0.5,
max: 1.5
},
I'm reading the docs but I cant figure out how to use theese when they are applied on the xAxis since I don't have any number values here. http://api.highcharts.com/highcharts#xAxis.min
Any ideas?

That is not related to min/max
Its related point placement with respect to tick
in plotOptions > area you have pointPlacement.
pointPlacement: null //default
pointPlacement: 'on' // on the tick
pointPlacement: 'between' //between the ticks
Updated your fiddle at http://jsfiddle.net/dG2s5/2/
I hope this is what you are looking for.

Related

Highcharts - getting all values scrollable after setting min-max range

Consider my following example case.
dataset = [[1,5],[2,6],[3,7],4,8],[5,9],[6,10]].
I made this graph scrollable on x-axis. When the graph is first loaded, I can see y values from x=1 to 4 by scrolling. The next step is I want to set min and max x-ranges by setExtreme() method.
I want to set x-axis min value 2 and max value 5. The graph range for x-axis should be 2-3. But the graph should be able to scroll to see value of x=1 and also when x=10. Is this possible? I am new to highcharts. Thanks in advance.
I think that you can achieve your requirement by defining the xAxis.min and xAxis.max values.
Demo: https://jsfiddle.net/BlackLabel/2wjztbom/
xAxis: {
min: 2,
max: 4,
scrollbar: {
enabled: true
},
},
Be aware that scrollbar feature is available only for the Highcharts Stock module, not for basic Highcharts - https://www.highcharts.com/docs/chart-concepts/scrollbar

Grid line view as background in Highchartjs?

In Highchartjs we can have grid lines based on series points. However I'd like to modify that by adding as many grid lines as I prefer.
In other words, I'd like to set this Grid-line as a background for this JsFiddle highchartjs line-graph
From looking at the docs, both the xAxis and yAxis support gridlines
The question really is; Is it possible to do this? If so please shed some light to this matter.
This can be set pretty much as you said:
xAxis: {
minorTickInterval: 0.25,
gridLineWidth: 1
},
yAxis: {
minorTickInterval: 0.25,
gridLineWidth: 1
}
The minorTickInterval governs how many "boxes" you have. Since the tick interval is 1 here, I set the minorTickInterval to 0.25, 1/0.25 = 4. Setting it to 0.2 would give 5 small boxes. Naturally if you change scale on the axes this will change as well.
Working example: http://jsfiddle.net/ewolden/t0bzyywe/1/
API refs: gridLineWidth and minorTickInterval

Any way to set min & max value for HighCharts Heatmap data?

Scenario: I have a heatmap (built with Angular) that is backed by a LARGE data set that is paginated. Each time I will only get a portion of that data and re-render the heat map for each 'page' load.
ex. The rendered heatmap will be 20x20 but the actual data set behind it is 400x400 or larger. Instead of loading all the data at once, each time I page the X or Y axis, I will re-render the heatmap.
This works great - however the color stops get adjusted based on the 'page' data each time.
I will know the minimum value and the max value of the 400x400 grid before I even render page x1,y1. How can I ensure the color stops are based on the min and max values on the 400x400 heatmap and not on data specific to the 20x20 heatmap?
I hope the explanation is straightforward enough.
Thanks!
You should be able to set the colorAxis.min and max if you know the values like you said like so:
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic',
gridLineWidth: 2,
gridLineColor: 'white',
minorTickInterval: 0.1,
minorGridLineColor: 'white',
tickLength: 0
},

Highcharts Line Chart with Only x-axis

I've recently made the switch to Highcharts, for easy compatibility with IE8, and have been updating past projects because of the simplicity, but I have run into a minor hurdle.
In one project the last SVG element remaining is a single x-axis without any accompanying chart (see below). Is it possible to show only an x-axis in Highcharts without any accompanying series or y-axis? Or if not, is there a way to create this type of design as a DIV?
Yes, you can display just xAxis. Don't add any of series, but set xAxis.min and xAxis.max. Demo: http://jsfiddle.net/m4r1qttL/6/
Now just disable titles, legend etc.
Just add
yAxis: {
...
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
...
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
}
To the axis definition

How replicate the value of Y Axis on both sides of the axis in Highcharts

I need only replicate the value of Y axes on both sides os the axis. Note that my chart DOES NOT have multiple axes.
Look the example: [http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/]
I know it's something simple, but I could not find the solution.
Please guide me. Thanks in advance.
You still need to specify multiple axes, and then you can use the 'linkedTo' and 'opposite' properties:
yAxis: [{
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},{
linkedTo:0,
opposite:true
}],
.
Edit for clarification based on comment below:
Highstock, at the time of this writing, sets the opposite property as true for the yAxis by default.
However, Highstock is not a "version of Highcharts".
Highstock is its own product, originating from and related to Highcharts.
All versions of Highcharts currently set opposite to false both axes by default - yAxis will be on the left, and xAxis will be on the bottom.

Categories

Resources