Develop Reference

Highchart Crosshair not touching x axis

I want to increase height of my xAxis crosshair to touch the x axis. Is there a way to achieve this. Below i have attached screen shot and code snippet for the same
Highcharts.chart(container, {
title: {
text: ""
},
xAxis: {
type: "datetime",
crosshair: true
}
}
I tried using it as tooltip option
tooltip: {
crosshairs: {
color: 'green',
width: 2,
height: 10
}
}
It takes width but does not take the height options
Js fiddle example

Currently the crosshair goes to where the x-axis baseline is expected to be (not accounting for offset), as also described by Mike Zavarello in the comments.
One workaround from my understanding of your situation is to extend Highcharts and instead draw the crosshair from the maximum value of your first y-axis (the one nearest the top) to the bottom of your second y-axis (the one nearest the bottom).
For example (JSFiddle):
(function (H) {
H.wrap(H.Axis.prototype, 'drawCrosshair', function (proceed, e, point) {
let old_function = H.Axis.prototype.getPlotLinePath;
H.Axis.prototype.getPlotLinePath = function (value, lineWidth, old, force, translatedValue) {
// copy paste handling of x value and sane value threshold
translatedValue = Math.min(Math.max(-1e5, translatedValue), 1e5);
x1 = x2 = Math.round(translatedValue + this.transB);
// max displayed value of your top y-axis
y1 = this.chart.yAxis[0].toPixels(this.chart.yAxis[0].max);
// min displayed value of your bottom y-axis
y2 = this.chart.yAxis[1].toPixels(this.chart.yAxis[1].min);
return this.chart.renderer.crispLine(
['M', x1, y1, 'L', x2, y2],
lineWidth || 1
);
};
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
H.Axis.prototype.getPlotLinePath = old_function;
});
}(Highcharts));
Note that this approach is very much directly addressing your problem by extending Axis.drawCrosshair, and within that extension rewriting the Axis.getPlotLinePath function to alter the path given for the crosshair. It does also not address crosshairs along the y-axis. Still, this could probably be solved in a similar way. It should be thoroughly tested for artifacts.

The length of the the crosshair is the same as xAxis height, so depending on the result you want to achieve set right xAxis height. Axis offset does not affect to the crosshair.
xAxis: {
crosshair: true,
height: 343, // yAxis[1].top - yAxis[0].top + yAxis[1].height
offset: -174
}
Live demo: http://jsfiddle.net/BlackLabel/w5c82ja9/

C3 Bar Graph x-axis labels are too congested

I have created a Bar graph using C3 JS plugin, The graph is working fine but the problem is with the x-axis labels looks too congested like as shown below
Working JSFiddle
My Code is as given below
var chart = c3.generate({
bindto: "#chart",
data: {
x : 'x',
columns: [
['x', "2016-04-01","2016-04-08","2016-04-15","2016-04-22","2016-04-29","2016-05-06","2016-05-13","2016-05-20","2016-05-27","2016-06-03","2016-06-10","2016-06-17","2016-06-24","2016-07-09","2016-07-10","2016-07-11","2016-07-12","2016-07-13","2016-07-15","2016-07-16","2016-07-17","2016-07-18","2016-07-19","2016-07-20","2016-07-21","2016-07-22","2016-07-23","2016-07-24","2016-07-25","2016-07-26","2016-07-27","2016-07-28","2016-07-29","2016-07-30","2016-07-31","2016-08-01","2016-08-02","2016-08-03","2016-08-04","2016-08-05","2016-08-06","2016-08-07","2016-08-08","2016-08-09","2016-08-10","2016-08-11","2016-08-12","2016-08-13","2016-08-14","2016-08-15","2016-08-16","2016-08-17","2016-08-18","2016-08-19","2016-08-20","2016-08-21","2016-08-22","2016-08-23","2016-08-24","2016-08-25","2016-08-26","2016-08-27","2016-08-28","2016-08-29","2016-08-30","2016-08-31","2016-09-01","2016-09-02","2016-09-03","2016-09-04","2016-09-05","2016-09-06","2016-09-07","2016-09-08","2016-09-09","2016-09-10","2016-09-11","2016-09-12","2016-09-13","2016-09-14","2016-09-15","2016-09-16","2016-09-17","2016-09-18","2016-09-19","2016-09-20","2016-09-21","2016-09-22","2016-09-23","2016-09-24","2016-09-25","2016-09-26","2016-09-27","2016-09-28","2016-09-29","2016-09-30","2016-10-01","2016-10-02","2016-10-03","2016-10-04","2016-10-05","2016-10-06","2016-10-07","2016-10-08","2016-10-09","2016-10-10","2016-10-11","2016-10-12","2016-10-13","2016-10-14","2016-10-15","2016-10-16","2016-10-17","2016-10-18","2016-10-19","2016-10-20","2016-10-21","2016-10-22","2016-10-23","2016-10-24","2016-10-25","2016-10-26","2016-10-27","2016-10-28","2016-10-29","2016-10-30","2016-10-31","2016-11-01","2016-11-02","2016-11-03","2016-11-04","2016-11-09"],
['pv1', 2500,2500,2500,2500,2500,2500,2500,2500,2500,2500,2500,2500,2500,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2748,2748,2694,2694,2694,2694,2694,2694,2694,2668,2668,2668,2668,2576,2572,2572,3043,3084,3084,3084,3084,3084,3156,3521,3521,3550,3542,3542,3573,3580,3629,3579,3584,3542,2757,2791,2696,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3414,3414,3414,3414,3414,3414,3414,3414,3414,3414,3414,3414,3414,3369,3376,3371,3373,3371,3379,3363,3373,3347,3348,3382,3402,3410,3434,2579,2579,2369],
['pv2', 1750,1750,1750,1750,1825,1850,1975,2150,2375,2425,2475,2500,2500,2087,2087,2087,2087,2091,2087,1767,1767,1767,1633,1498,1498,1642,1637,1633,1609,1841,1713,1702,1862,1888,1888,1888,1949,1976,1977,2014,2014,2014,1946,1966,1973,2224,2252,2318,2318,2318,2327,2373,2513,2535,2543,2534,2539,2823,2849,2990,3142,3142,3108,2513,2687,2678,2856,2860,2861,2862,2866,2869,2870,2875,2874,2874,2874,2879,2885,2886,2883,2889,2896,2895,2899,2903,2909,2911,2913,2913,2913,2916,2922,2933,2937,2943,2942,2943,2947,1811,1826,1837,1840,1840,1841,1843,1511,1854,1853,1851,1852,1853,1849,1852,1874,1857,1883,1886,1888,1904,1903,1924,1947,2060,2068,2068,2082,1582,1344,836,839,788]
],
type: 'bar'
},
axis: {
x: {
type: 'category',
tick: {
rotate: -60,
multiline: false
},
height: 130
}
}
});
Can anyone please tell me some solution for this
What I did to solve it
I have used timeseries type instead of category type, after that the label issue got resolved but the graph was been plottted with more white spaces for the month of march like as shown below
Working JSFiddle

You can use c3's tick count setting for this, so here we say 20 labels.
However there is an added gotcha in that ticks that now resolve to a fractional category value won't show - i.e. the 2nd equally spaced tick out of 20 may be the 2.6667th element in the x category axis - so you need to have a little format function that adjusts for this, otherwise you just get the end and start labels. (Or you could figure out a tick count that divides into your data count + 1 as a whole number.)
tick: {
format: function (x) {
var cats = this.api.categories();
return cats[Math.round(x)];
},
count: 20,
rotate: -60,
multiline: false
},
http://jsfiddle.net/fz0t10yb/7/

One of the possible solution could be to use x-axis labels at required indexes only & leaving others blank.
['x', "2016-04-01","","","","2016-04-29","","","",...]
['pv1', 2500,2500,2500,2500,2500,2500,2500,2500,...]
['pv2', 1750,1750,1750,1750,1825,1850,1975,2150,...]
You can position labels so that it would capture the date and at same time it looks good also.

How can I create a horizontal stacked bar chart with labels on the bars themselves as well as labels above the bars?

I'm trying to create a horizontal stacked bar chart with labels on the bars themselves (currently using dataLabels) as well as labels just above the bars.
Here is a JSFiddle I've created that somewhat resembles what I am trying to accomplish. In this example I've placed the labels using plotLine labels, but I'm having a difficult time figuring out how to place the bars correctly in my real use case as I get the data for the bars through Ajax calls.
JSFiddle
I've experimented with stackLabels, plotLine labels as well as plotBand labels but to no avail. How can I place labels above the bars correctly every time?

I would use plotBands instead of plotLines - you can better control the alignment within the band, which can be set to cover the same portion of the graph as the bar itself.
An example.
Using your series data:
var series = [{
name: 'John',
data: [5]
},
{
name: 'Jane',
data: [2]
}, {
name: 'Joe',
data: [3]
}]
We can loop through and build a plotBands array from the same data:
var bands = [],
prevData = 0;
$.each(series, function(i,ser) {
var point = ser.data[0],
name = ser.name;
bands.push({
from: prevData,
to: (prevData + point),
color: 'rgba(255,255,255,0)',
label: {
text: name,
align: 'center'
}
});
prevData = (prevData+point);
});
To make this match the order of the series as plotted, we need to set reversedStacks: false on the yAxis, as by default, Highcharts reverses the order of the series. Then we populate the plotBands with our generated array:
yAxis: {
reversedStacks: false,
plotBands: bands
}
In this way you can make use of the full feature set of the plotBands label properties.
Updated fiddle:
http://jsfiddle.net/jlbriggs/xwzfjbhe/4/
And this adjusts to fit however many data points you have, provided you keep the same format (series.name, series.data[0]):
http://jsfiddle.net/jlbriggs/xwzfjbhe/5/
There are a number of other ways you can go about this as well, including:
The labels property: http://api.highcharts.com/highcharts/labels
The renderer function: http://api.highcharts.com/highcharts/Renderer

Is it possible to change properties of xAxis.labels individually in HighCharts?

I would like to set different properties for my labels on the xAxis (Here is my problem).
I know how to do this for dataLabels : API.
It is similar to this.
But I don't find anything to do the same thing for xAxis.labels.
Does it exist a way to do this ?
Solution :
It changes only y property of xAxis labels.
Here is a jsFiddle.
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function () {
var xAxis = this.xAxis[0];
var serie = this.series[0];
for (var current_tick in xAxis.ticks) {
var tick = xAxis.ticks[current_tick];
if(serie.data[current_tick]){
if (serie.data[current_tick].y > 0) {
tick.label.attr({
y: tick.label.y + 18
});
}
}
}
}
}
}

I am not aware of a way to do that.
What I would probably do in this situation is create to x axes, one for the positive values, and one for the negative.
{{edit - although, it seems the axis offset plugin only works (at least from what I am seeing) if you have opposite: true set for the axis.
SO, you have to offset the labels on one of them. example:
http://jsfiddle.net/jlbriggs/S48eX/

flotgraph using functions for conditional radius

I have a dataset where each node contains a date and a value.
I don't want flot to draw a circular point at ever value, especially if the value is zero
so in my graph's options I have:
points: {
show: true,
radius: 3
},
but how do I have `radius: function (x) { return x.value>0?3:0 };
is this possible in flot, if so what is the syntax?

Flot expects radius to be a number. The simplest way to achieve this would be to create two series with the same color. The first contains all the datapoints and points: { show: false } and the second contains only those datapoints where y > 0 and lines: { show: false }.