Grid line view as background in Highchartjs? - javascript

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

Related

Chartjs: How can I group datasets closer if I have maxBarThickness set?

I have a chart where I've set a maxBarThickness on my axis. When the chart is populated with a lot of data, the datasets are close together, but when there are just a few data points, the datasets look wide apart.
I have tried setting categoryPercentage to a smaller percentage but when the chart is populated with a lot of data (or on page resize), the chart looks wrong. Any help would be appreciated.
According to this github issue you cannot change the space between bars if you decide to set a barThickness (I assume it does not work when maxBarThickness is set either but I might be wrong, if so I'll delete this answer)
According to the previous link, you have two solutions:
If you want to keep your bar thickness (answer to the github issue):
If you don't want to stretch out the bar to fill the extra space, you have to reduce the width of the canvas.
Otherwise you could set a barPercentage and a categoryPercentage on your chart, without a barThickness or a maxBarThickness:
scales: {
xAxes: [{
categoryPercentage: 0.8,
barPercentage: 0.9
}]
},
Those are the default values.
Related questions :
Chart.js Bar Chart: How to remove space between the bars in v2.3?
CharJS 2.5.0 - How to remove space between bars
Reduce space between ticks in horizontal bar-chart chartJS

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

Area chart with two data points. Full width

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.

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