I'm new to jqPlot and decided to try it out.
I'm facing an issue which I cannot resolve.
The ticks for month ('Jul' etc.) are too far below the x-axis. Is there a way to bring the ticks closer to the axis?
The options for the axes are as follows:
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
rendererOptions: {
tickRenderer: $.jqplot.AxisTickRenderer,
tickOptions: {
size: 2
}},
ticks: ticks,
label: xAxisTitle,
min: 0
},
yaxis: {
label: yAxisTitle,
pad: 1.05
}
}
By default, ticks are close to the graph.
It should be a container size problem. Try to reduce it, move your label (perhaps inside your table see legend location)
Tick documentation
Related
I want to draw basic line chart.
When the data type of x-axis is numerical,
I can use the following options to draw this chart when the number of x labels is larger than 1000
plotOptions: {
line: {
turboThreshold: 2000,
},
series: {
turboThreshold: 2000,
}
}
But it seems not work when the data type is categorical and the number of category in x-axis is too large (> 1000 categories)
The link I had tried:
Test on jsfiddle
Is there any solution about this problem?
Many thanks
Check this fiddle: http://jsfiddle.net/am2k9c1t/
Code:
xAxis: {
tickInterval:10,
min:1200,
}
Set tickInterval value in xAxis.
example:
xAxis: {
tickInterval:100
}
Test it here
I would like to have specific point intervals in high chart.
I have a passrate chart where in the Y axis shows the percentage passrate. But I would like be able to alter the y axis plot points.
Please refer to this fiddle.
http://jsfiddle.net/Mn6sB/2/
Here is a small code piece - how ever the range is not 10 intervals.
yAxis: {
title: {
text: 'PassCount'
},
min: 0,
max:100,
minTickInterval:10
},
minTickInterval: NumberSince 2.3.0
The minimum tick interval allowed in axis values. For example on zooming in on an axis with daily data, this can be used to prevent the axis from showing hours.
If you want the y axis tick interval changes when you zoom in, you need to enable the zooming first.
chart: {
renderTo: 'chartContainer',
type: 'spline',
zoomType: 'y'
}
Or, if you want to fix the tick interval, what you need is not minTickInterval but tickInterval
So your small code piece should be:
yAxis: {
min: 0,
max:100,
tickInterval:10
}
Two Part Q:
Why is high charts not correctly aligning and displaying the following date on the x axis?
How can I align the date on the x axis with the points in each series?
I have tried adjusting to tickinterval to various values but to no avail on either issue.
tickPixelInterval: 200
Fiddle->http://jsfiddle.net/EwpWh/
Use datetime axis instead of linear, see: http://jsfiddle.net/Fusher/EwpWh/5/
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%m/%d', this.value);
}
},
tickPixelInterval: 200
},
However if you want to have ticks exactly in the same place as points are, you need to use one of:
tickPositions: http://api.highcharts.com/highstock#xAxis.tickPositions
tickPositioner: http://api.highcharts.com/highstock#xAxis.tickPositioner
I am currently experimenting with the Highcharts charting library, and am totally blown away by its capabilities.
Something I am trying to accomplish is to add a permanent, draggable 'selection' box (or mask) to my chart. This selection box will always be a certain fixed width. For example, say my chart has 30 days worth of data, I would like there to be a draggable box with the width of 1 day. Dragging the box up and down the x-axis (over the actual chart data) will fire off other application events using the selected day as a parameter.
I guess I am looking for something very similar to the navigator in Highstock charts - but again the primary difference is keeping a fixed width selection. Any tips or suggestions would be greatly appreciated.
In Highcharts there is no such built-in feature but in Highstock you can also use only scrollbar, see: http://jsfiddle.net/ea7za/ Now you can use or bottom scrollbar or panning (drag on plotting area).
$.getJSON('url.json', function(data) {
var min = data[0][0], // min
max = data[500][0]; // max - e.g. max = min + 24 * 3600 * 1000; as one day
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
enabled: false
},
navigator: {
enabled: false
},
xAxis: {
min: min,
max: max
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
Is it possible to invert the y-axis, but not the data? I have a ranking which should start with 1 at the top, not at the bottom, but the columns should stay just normal.
Thanks for any hints!
You can use reversed yAxis, and column series, where each point will have y and low values, where low values are the same as the lowest number. See: http://jsfiddle.net/JVNjs/303/
var max = 10;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Chart Title'
},
credits: {
enabled: false
},
yAxis: {
min: 0,
max: max,
tickInterval: 2,
reversed: true
},
series: [{
type: 'column',
data: [{
y: 1,
low: max
}, {
y: 3,
low: max
}, {
y: 6,
low: max
}]
}]
There is no good easy direct way to do it (afaik).
There are a variety of approaches you could take, however.
This example uses a reversed axis and stacked columns:
http://jsfiddle.net/jlbriggs/JVNjs/301/
stacking:'normal',
It relies on adding a second series that is the difference between your value and the max, which means you must also specify a y axis max.
I left the second series a light grey so you can see them, but you can set their opacity to 0 so that they are invisible.
Other options might include doing some calculations on the y axis label formatter to display the axis labels as you want without having to touch the data.
Highcharts provides an option for this called reversed setting it true will do the work for you.
http://api.highcharts.com/highcharts#yAxis.reversed
reversed: true
here is the jsfiddle
http://jsfiddle.net/bmbhD/