In a scatter HighCharts plot, I want to set some properties only for some data points of my series. Here is a toy example:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
type: 'line',
data: [[1,1],
{x:3,y:2,marker:{enabled:false}},
[4,1]]
}]
});
});
});
I need (in decreasing order of priority) the second point to NOT have:
the marker (already done in my code, working);
the tooltip (tried but without success, I don't know how to do it working)
the line coming from previous point (tried but without success, I don't know
how to do it working)
Here is a jfiddle version.
For your second point, improvised from a similar answer:
Disable tooltip on certain points in Highcharts
tooltip: {
formatter: function() {
if (this.point.x != 1) { //enable for each point except the second point
return this.x;
}
else return false;
}
}
for your third point you might try to use a trick. If you set the y value as null, that point won't be displayed in the line. So draw your line, and enter two data with null y values to create a lonely point on the chart.
Here is an example: http://jsfiddle.net/8U8nx/14/
Related
I want to draw a line on a ohlc chart, but i dont want the new series to introduce gaps.
The first series (ohlc) should still place the candles in an nica way with constant gaps between them regardles of open-close times (i think its only the "ordinal" value that does this, but unfortunatelly you cant specify it at series level, but only axis level).
xAxis: {
ordinal: true
},
example:
http://jsfiddle.net/5r97owky/8/
Thank you for any help
The gaps are caused by ordinal option. You can create additional xAxis for line series:
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
var xAxes = this.xAxis,
extremes = xAxes[0].getExtremes();
xAxes[1].setExtremes(extremes.min, extremes.max, true, false);
}
}
},
xAxis: [{}, {
visible: false
}],
...
});
Live demo: http://jsfiddle.net/BlackLabel/1mbo2zp4/
API: https://api.highcharts.com/highstock/xAxis.ordinal
I am running into an issue of incorrect point's tooltip on synchronised charts. On the synchronised charts the crosshair is shown and using ordinal:false I am plotting equidistance ticks.
The issue occurs when the crosshair moves along with mouse-move and shows the nearest point's data on the tooltip.
The expected behaviour is: when there is no data, crosshair should be shown but not the tooltip.
here is an existing SO fiddle I found https://jsfiddle.net/jknipp/g3vr5v44/13/
To achieve the effect you need, just return false if window.isOutOfSync, instead of No data string here:
formatter: function(tooltip) {
var header,
s = [];
console.log(window.isOutOfSync);
if (window.isOutOfSync) {
console.log("don't show tooltip");
//return false;
console.log(this)
return false;
}
$.each(this.points, function(i, point) {
// check to see if the point is in the overall graph
//var overallChart = $("#total_success_rates").highcharts();
//console.log(overallChart);
var isSuccessRate = (point.series.name == 'Success');
if (header == null) {
var config = point.point.getLabelConfig();
header = tooltip.tooltipFooterHeaderFormatter(config);
}
s.push(formatSuccessRateToolTip(point.y, isSuccessRate));
// $("#" + point.series.name.toLowerCase() + "-rate").html(point.y + "%");
});
return header + s.reverse().join('<br>');
}
[EDIT]
Additionally, please call reflow() inside of the chart.events.load function on both charts, just like below:
chart: {
renderTo: container,
type: 'areaspline',
events: {
load() {
this.reflow()
}
},
height: '220',
spacingBottom: 20,
spacingTop: 20,
spacingLeft: 20,
spacingRight: 20
},
Live example: https://jsfiddle.net/27veyw1d/
Am trying to generate a scientific bubble chart and it is suppose to be presented as a dashboard. The chart is intended to reflect bubbles and these bubbles will be changing in size and location using an ajax call.
I was able to do must of that, but am facing a performance issue. The ajax is returning an average of 80 to 150 items each presented by a Series of type bubble.
As such, am faced with two problems
1) The browser freezes at every request, I tried to make the javascript sleep between each add operation but did not solve the problem.
2) After the first ajax call, other calls will need to alter existing Series of their facts has changes. How can I retrieve an existing Series and change its values in case it needs to be altered?
$(function () {
function addPoint(chart){
$.get("{{ main_site_url }}/dashboard/likelihood/ajax/",
function(data) {
$.each(data, function(k, dic) {
var newSeries = new Highcharts.Series();
newSeries.type = 'bubble';
newSeries.id = dic.id
newSeries.data = [[dic.id, dic.views, dic.likes] ];
setTimeout(function() {
chart.addSeries(newSeries);
}, 2000);
});
}, "jsonp"
);
}
$(document).ready(function() {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var chart = this;
setInterval(function() {
addPoint(chart)
}, 3000);
}
}
},
title: {
text: 'Likelihood bubbles'
}
});
});
});
I'm working with Highchart.
I've got a multiple series graph in which each series have their own y-axis.
pretty much like this one (jsfiddle)
when we click on the legend item for a series, it hides it and the associated y-axis
(using showEmpty:false helped hiding also the name of the axes)
What I'm trying to achieve is hiding the y-Axis of a given series without hiding the series itself.
I tried to hide it by modifying the showAxis property like this :
serie.yAxis.showAxis = false;
but it doesn't work.
Anyone knows how I should do ?
EDIT : I managed to edit the text so I can remove the axis title by setting the text to null but its not enough to hide the whole axis and its values.
here's what i did to edit the text:
serie.yAxis.axisTitle.attr({
text: null
});
Highcharts 4.1.9+
Since 4.1.9, there is an option Axis.visible which can be used to show/hide an axis, demo: http://jsfiddle.net/3sembmfo/36/
Older versions of Highcharts
It's a new feature for Highcharts 3.0 - that allows to update axes in realtime: chart.yAxis[0].update(object) - as object takes the same options as for creating chart. For example:
chart.yAxis[0].update({
labels: {
enabled: false
},
title: {
text: null
}
});
And jsFiddle: http://jsfiddle.net/39xBU/2/
EDIT:
Use below snippet to hide/show axis by just calling axis.hide() and axis.show(). Live demo: http://jsfiddle.net/39xBU/183/
(function (HC) {
var UNDEFINED;
HC.wrap(HC.Axis.prototype, 'render', function (p) {
if (typeof this.visible === 'undefined') {
this.visible = true;
}
if(this.visible) {
this.min = this.prevMin || this.min;
this.max = this.prevMax || this.max;
} else {
this.prevMin = this.min;
this.prevMax = this.max;
this.min = UNDEFINED;
this.max = UNDEFINED;
}
this.hasData = this.visible;
p.call(this);
});
HC.Axis.prototype.hide = function () {
this.visible = false;
this.render();
HC.each(this.plotLinesAndBands, function (plotLine) {
plotLine.render();
});
};
HC.Axis.prototype.show = function () {
this.visible = true;
this.render();
HC.each(this.plotLinesAndBands, function (plotLine) {
plotLine.render();
});
};
})(Highcharts);
It's actually gotten simpler. You only have to set the yAxis title attribute to false:
yAxis: {
title: false
},
Here is an example: jsfiddle example
We can hide Yaxis label without hiding the y-Axis without hiding the series by returning the empty string as follows:
yAxis: {
title: '',
labels: {
formatter: function() {
return '';
},
style: {
color: '#4572A7'
}
}
},
For newer versions (I'm using the 6.2.0), the yAxis property has a parameter called gridLineWidth. Just set it to 0 and the grids for that axis are going to disappear. In this JSFiddle there is an example of it.
However, if you are in styled mode this it's trickier. Here, you have to set a className for the target axis and then set the CSS like this:
.highcharts-yaxis-grid {
&.right-axis {
path {
stroke: none;
}
}
}
For example, this will make dissapear the grids of the axis with a className set as right-axis. This allow to have different styles for the multiple axis.
I have a Highcharts line graph that has dataLabels configured in the plotOptions. This is all working well and I have a nice label displayed over each point.
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function() {
return '$' + Highcharts.numberFormat(Math.round(this.y),0,0,",");
}
}
}
}
However, is there a way to set an interval that determines how often the dataLabels appear over the points? I want to show every point in my graph, but due to space constraints, only show the dataLabel every 2 or 3 points.
Edit:
Difficulty level: My graph has multiple y-axes, uses datetime for the x-axis, and has irregular data.
http://jsfiddle.net/SQkMW/68/
Yes, you could just return a blank string if the point x mod 2 is 0, for every 2nd to show up, for example (http://jsfiddle.net/HzYtV/):
formatter: function() {
if(this.point.x % 2 == 0) return '';
return this.y +'mm';
}
For datetime axis you will have to create a variable and increment it manually http://jsfiddle.net/SQkMW/69/