I have folowing setup:
scrollbar: {
enabled: true,
},
and
xAxis: {
min:0,
max:10,
...
Its all fine I if a have more than 10 records that are being displayed. If I get less than 10 records I get this result.
when I click on the scroll bar I get the right chart.
Is the any solution for this problem, and can I hide the scroll bar if there less then 10 records available?
Get your var length = data.length; before creating chart and set max: length < 10 ? length : 10
Related
I have data like this:
Js Fiddle
xAxis: {
max: length < 10 ? length-1 : 10,
scrollbar: {
enabled: length < 10 ? false : true
},
type: 'category',
style:{
fontSize: '11px',
}
},
I have tried this to show scroll bar on x-axis if my max size exceeded but this not worked for me. Can you help me out to show the scroll bar if the max size is exceeded?
reference:Js fiddle scroll
Not exactly the above scroll normal scroll bar also help me out.
You can make scrollbar.enabled option dependent on data.length in the below way.
Please note that the scrollbar feature is only available in Highstock.
scrollbar: {
enabled: data.length < 10 ? false : true
},
Live demo: https://jsfiddle.net/BlackLabel/pe7kcsjL/
API Reference: https://api.highcharts.com/highstock/scrollbar.enabled
I've developed a bunch of bar charts in HighCharts cloud with positive and negative values.
First question:
is it possible to have the xAxis appear at the 0 line (not at the bottom of the chart)?
What I've done so far is offset the xAxis so it's placed on the 0 line, which kinda works but I was hoping for a better solution. The other method I was think was to use plotLines code on the yAxis, but I don't get the ticks:
plotLines: [{
color: '#010101',
width: 2,
value: 0,
zIndex: 5
}],
Second question:
is it possible to have the tick marks to appear between each bar, and not just the bars that have an xAxis label?
This is what's rendering for me at the moment, and I'm trying to get a tick between all the bars while showing the same number of labels https://cloud.highcharts.com/show/cLtfEDClS
First question:
You can merge this configuration into chart options in Cloud’s custom code section:
chart: {
events: {
load: function() {
var yAxis = this.yAxis[0];
this.xAxis[0].update({
offset: -yAxis.toPixels(Math.abs(yAxis.min), true)
});
}
}
},
Demo: http://jsfiddle.net/BlackLabel/6712zrod/
It automatically positions x axis so that it works as y = 0 line.
Second question:
Try setting X Axis[0] > Labels > Step to 1.
API reference: https://api.highcharts.com/highcharts/xAxis.labels.step
Explanation from Docs:
To show only every n'th label on the axis, set the step to n. Setting the step to 2 shows every other label.
By default, the step is calculated automatically to avoid overlap. To prevent this, set it to 1. This usually only happens on a category axis, and is often a sign that you have chosen the wrong axis type.
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
}
}]
});
});
I have a column chart in HighCharts and having issues where data labels are running into each other. The graph has a static width and I could potentially have 4 series with at most 4 data points inside each series (4 stacks next to each other). I do have positive and negative values. I am seeing that if the series have similar values, each column is then the same height which causes the data labels to run into each other.
Any way to fix this issue? I cannot seem to find an library option that will help.
Added the groupPadding option worked for me:
plotOptions:
{
column:
{
dataLabels:
{
enabled: true,
formatter: function() { return this.y + '%' }
}
},
series:
{
groupPadding: 0.125
}
},
Have you tried increasing the width of the bars? What about adjusting the font size of the labels? A combination of these 2 APIs should help get around this given you have a static sized chart and a maximum of 4 series with 4 data points...
http://api.highcharts.com/highcharts#plotOptions.column.pointWidth
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.style
I'm displaying a number of series in a highstock chart. I chose highstock because I want to show at least 4 hours of data with the option of scrolling if the user adds data points beyond those 4 hours (but I don't want the rangeSelector or navigator enabled, if that pertains to the problem I'm having).
I thought this would be straightforward, but I'm having problems showing 15-minute intervals on the x-axis. When one data point is dynamically added, the graph correctly shows the 15-minute tick intervals, but when more data points are added, the x-axis starts to scale the times incorrectly. If I then refresh the page and display a graph with multiple data points, I get really weird tickIntervals.
Here are my xAxis options:
xAxis: {
type: 'datetime',
min: 1361815200000,
max: 1361829780000,
tickInterval: 15 * 60 * 1000,
minTickInterval: 15 * 60 * 1000, // 15 minute intervals
gridLineWidth: 2,
labels: {
formatter: function () {
var d = new Date(this.value);
return (d.getMinutes() == 0) ? '<b>' + Highcharts.dateFormat('%H:%M', this.value) + '</b>' : d.getMinutes();
}
}
}
You can see the rest here: http://jsfiddle.net/pxCsX/
What am I missing? I've tinkered with minRange, type and other xAxis and series attributes and scoured the highstock docs, but I keep coming up with bupkis.
Setting ordinal to false solves the problem:
xAxis: {
ordinal: false
}