Consider the following high chart
At 15 jun, category II has no data, what if I dont want that spacing left for it, Is there anyway to remove such spaces.
for code reference
`http://jsfiddle.net/G5S9L/8/`
I don't see anything in the API that allows you to do this. As a kludgy workaround you could shift the columns yourself in the onload callback:
, function(chart){
var barLeft = $(chart.series[0].data[1].graphic.element);
var barRight = $(chart.series[2].data[1].graphic.element);
barLeft.attr('x',parseInt(barLeft.attr('x')) + parseInt(barLeft.attr('width'))/2);
barRight.attr('x',parseInt(barRight.attr('x')) - parseInt(barRight.attr('width'))/2);
});
Updated fiddle.
This is how Highcharts work. It calculates the space for categories, then divide it between series. It doesn't matter if you have data or not, space is given for possible points.
Related
I have a data chart DataChart would like to shift data of xAxis along with data lines to right by certain value.
DataChart Screen Shot
Please help me out which property to use from the library that would be able to solve this purpose.
I am using Daniel Gindi line charts for this purpose.
I use this to create an offset to the left of my chart
myChart.xAxis.spaceMin = 10
maybe it'll do for you
And to align the yAxis lines in front of the labels, i think you could remove the background grid and create your own limit lines if you don't find any other way around
is it viable to subtract the distance d from the x values? that would shift it rightward.
d = 7.0
rightShifted = newGraphData.values.map{ChartDataEntry(x:$0.x-d, y:$0.y)}
I need the points of my chart to have a fixed width (say, 100px each). If the needed space exceed the width of the chart, I just want to be able to scroll horizontally (with the scrollbar.enabled parameter set to true).
This is the basic setup, without setting the points width:
http://jsfiddle.net/wxxdne19/
If I set the column width like this:
http://jsfiddle.net/wxxdne19/1/
The tickPixelInterval parameter is ignored (as the documentation says, of course).
I tried a bunch of other things, but none of them worked, and I ran out of ideas. How can I do what I need?
Update
To clarify what I need, think of it as if I have a column chart, and I need to force all the columns to have a fixed width. Something like this:
http://jsfiddle.net/4rx4snjh/
But, instead of the columns overlapping each other, I'd like the scrollbar to do its job :-) Furthermore, I need it to work with any kind of series (lines, areas...), not just columns.
It seems that the solution here is to compute extremes manually and set them in load event:
load: function() {
var chart = this,
xAxis = this.xAxis[0],
visibleColumns = (xAxis.width - pointWidth) / pointWidth;
xAxis.setExtremes(pointStart, pointStart + pointInterval * visibleColumns);
}
Live demo: http://jsfiddle.net/kkulig/mpancrbc/
For some reason (bug probably) xAxis.min value must be initialized when the container width is a small value (in my example it's less that 400 px or so).
API reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I have some pie charts on my site and they show quite a bit of data. I was wondering if there is a way to load the data, but initially hide any data that is less than some arbitrary value. When I say hide, I mean in the same way you can hide the certain data by clicking on the label in the legend. Then through the legend, have the user be able to show this data on the graph by clicking on the label in the legend. Is there a property or something I can use to accomplish this?
You can define any variable as maxValue, then iterate on each point and call setVisible as false.
var minValue = 10
$.each(chart.series[0].data, function(i, point){
if(point.y < minValue) {
point.setVisible(false);
}
});
Example: http://jsfiddle.net/ct2jejgv/
Simply use this.chart.series[i].hide() / .show(). In your script, manually search for series less than your value and hide them like above. Its a simple foreach.
I am drawing a line chart with monthly data points. However, I want the scale to display year strings only.
So far, so easy. However, as far as I can see, Highcharts will always draw the xAxis labels relative to the ticks... and I am required to display them centered between ticks.
Is there some simple way of doing this that I am missing, please...?
According to my understanding, the behavior you desire is: http://jsfiddle.net/msjaiswal/U45Sr/2/
Let me break down the solution :
1. Monthly Data Points
One data point corresponding to one month :
var data = [
[Date.UTC(2003,1),0.872],
[Date.UTC(2003,2),0.8714],
[Date.UTC(2003,3),0.8638],
[Date.UTC(2003,4),0.8567],
[Date.UTC(2003,5),0.8536],
[Date.UTC(2003,6),0.8564],
..
]
2. Scale to display only yearly ticks
Use chart options like this:
xAxis: {
minRange : 30 * 24 * 3600 * 1000, //
minTickInterval: 12* 30 * 24 * 3600 * 1000 // An year
},
There is no simple, out-of-the-box solution. You have to use events and reposition the labels accordingly. Here is a sample solution that also works when resizing the browser window (or otherwise forcing the chart to redraw), even when the tick count changes: http://jsfiddle.net/McNetic/eyyom2qg/3/
It works by attaching the same event handler to both the load and the redraw events:
$('#container').highcharts({
chart: {
events: {
load: fixLabels,
redraw: fixLabels
}
},
[...]
The handler itself looks like this:
var fixLabels = function() {
var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
});
labels.css('margin-left',
(parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left'))) / 2
);
$(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};
Basically, it works like this:
Get all existing labels (when redrawn, this includes newly added ones). 2. Sort by css property 'left' (they are not sorted this way after some redrawing)
Calculate offset between the first two labels (the offset is the same for all labels)
Set half of the offset as margin-left of all labels, effectively shifting them half the offset to the right.
Remove the rightmost label (moved outside of chart, by sometimes partly visible).
This can be done with a workaround by manually adjusting the label positioning via a callback (called on both load and redraw). Please see the fiddle linked to in my comment on this post: Highcharts - how can I center labels on a datetime x-axis?
There are several xAxis options which may help do what you want.
http://api.highcharts.com/highcharts#xAxis.labels
Take a look at 'align' which specifies whether the labels are to the left or right of the tick, and also 'x' which allows you to specify a x-offset for the label from the tick.
Have you tried to use tick placement ? http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement
In a Highcharts column chart we'd like to highlight one value/sample by drawing its column a little bit wider... But this seems not to be possible, is it?
pointWidth only affects the whole series.
Maybe I could overlay a second series, but IMHO that's not a nice solution.
You can also use data attribute and modify width.
http://jsfiddle.net/cDvmy/2/
chart.series[0].data[0].graphic.attr({
width:50
});
I don't see any way to do this with the current API. As an equally not nice solution you could adjust the SVG after the plot is drawn:
// make fifth bar of first series wider
var bar = $($('.highcharts-series').children()[4]);
bar.attr('width',parseInt(bar.attr('width'))+20);
bar.attr('x',parseInt(bar.attr('x'))-10); // keep it centered
Fiddle here.