While testing Highcharts v6.0.7 I found that Waterfall chart yAxis point does not accept "low" value anymore (series.data.low). The same option in the Column chart works and the point does not start at the bottom but at the "low" value.
I tried it with an older version (4.2.3) and it works. The reason for using "low" value is that I want to have first point in Waterfall chart start at specified "low" value instead of the bottom of the chart.
I searched through the documentation and could not find any info about this, is this a bug or has this "low" option been removed. And if there is a workaround for this that would give me the same results.
If something "worked" on specific version and wasn't documented at all (I checked the documentation of v4.2.3), then we can assume that was some type of undesirable behaviour. I see that 'waterfall' series inherits from column series, on which the low parameter still works as you described, but it also doesn't occurs in documentation.
If you would like to get similar effect, please try to use series.threshold parameter, but in my opinion both of ways breaks the logic of the chart a bit.
series: [{
threshold: 100000,
data: [{
y: 120000,
}, {
y: 569000,
}, {
y: 231000
}, {
isIntermediateSum: true,
color: Highcharts.getOptions().colors[1]
}, {
y: -342000
}, {
y: -233000
}, {
isSum: true,
}]
Live example: https://jsfiddle.net/nxwy48uj/
API Reference: https://api.highcharts.com/highcharts/series.waterfall.threshold
I set the lineWidth already to let every point connected to each other but it's still won't work. Please help me to inspect the sample data below and also the options setting
[{"x":101.4,"y":69.235,"marker":{"fillColor":"#BF0B23"}},{"x":101.23,"y":69.24},{"x":101.03,"y":69.24},{"x":100.82,"y":69.22},{"x":100.61,"y":69.21},{"x":100.41,"y":69.21},{"x":99.95,"y":69.19},{"x":99.96,"y":69.19},{"x":100,"y":69.14},{"x":100.03,"y":69.1},{"x":100.04,"y":69.1},{"x":100.09,"y":69.085},{"x":100.15,"y":69.08},{"x":100.08,"y":69.135},{"x":100.03,"y":69.095},{"x":100.06,"y":69.07},{"x":100.1,"y":69.07},{"x":100.25,"y":69.045},{"x":100.18,"y":69.105},{"x":102.82,"y":68.925},{"x":102.52,"y":68.89},{"x":102.2,"y":68.86},{"x":102.18,"y":68.87},{"x":102.25,"y":68.855},{"x":102.21,"y":68.845},{"x":102.82,"y":69.595},{"x":102.9,"y":69.575},{"x":102.86,"y":69.595},{"x":102.8,"y":69.775},{"x":102.83,"y":69.695},{"x":102.83,"y":69.755},{"x":102.82,"y":69.615},{"x":102.91,"y":69.615},{"x":102.88,"y":69.575},{"x":102.98,"y":69.585},{"x":103.16,"y":69.655},{"x":103,"y":69.655},{"x":102.91,"y":69.595},{"x":102.82,"y":69.595},{"x":102.7,"y":69.575},{"x":102.76,"y":69.625},{"x":102.77,"y":69.575},{"x":102.76,"y":69.545},{"x":102.85,"y":69.505},{"x":102.99,"y":69.505},{"x":103.02,"y":69.505},{"x":102.88,"y":69.515},{"x":103,"y":69.845},{"x":103.19,"y":69.805},{"x":103.1,"y":69.725},{"x":102.79,"y":69.675},{"x":102.96,"y":69.735},{"x":103.14,"y":69.625},{"x":103.02,"y":69.615},{"x":103.27,"y":69.785},{"x":103.19,"y":69.765},{"x":102.88,"y":69.475},{"x":103,"y":69.475},{"x":102.99,"y":69.395},{"x":99.49,"y":69.195},{"x":99.32,"y":69.215,"marker":{"fillColor":"black"}}]
this is not the whole data. The data is not fit in in SO textarea
the options
options = {
chart: {
type: 'scatter',
animation:false
},
plotOptions: {
scatter: {
turboThreshold: 9999
}
},
series: [{
name: 'Hysteresis',
data: [],
lineWidth: 2
}]
}
Here my attempt to use with jsFiddle and it's working. But for your information, I dynamically load the data like this chart.series[0].setData() and it's not working
screenshot of console.log($('ele').highcharts());
this is the alternative that I tried, how I push the data to the series before initiated highcharts
options.series[0].data.push({
x: parseFloat(model.get('xreading')),
y: parseFloat(model.get('yreading')),
marker:{ fillColor: '#BF0B23', symbol: 'triangle' }, label: model.get('iv_date')
});
Any possible options that might prevent it from draw the line
to solve this little problem when it is not connected,
check your data. Make sure x and y is available if normal push array
not working for you, why not you try build json string then later parse it
that's all folks
A scatter plot (definition of a scatter plot # Wikipedia) doesn't have lines connecting each data point. Line graphs have lines: Highcharts, Basic Line # highcharts.com
Change:
type: 'scatter',
to
type: 'line',
Then change the plotOptions accordingly.
Maybe what you really want is a trend line? See: https://github.com/virtualstaticvoid/highcharts_trendline
That's a regression line which is automatically calculated to fit your data?
I'm trying to use the type:'datetime' for my x-axis, and am getting a graph on a vertical line and dates going all the way back to 1970. Is there any way to circumvent this error?
Here's my use case: I'm tracking my page performance at regular intervals. if the server goes down for any reason or the metric was unable to be tracked, then we end up with a gap in the line. the requirement is to show this as datetime, but if i populate the series with any null datapoints, Highcharts throws an error 15.
series: [{
data: [
{x:1389254400000,y:10},
{x:1389554400000,y:9},
null,
{x:1389854400000,y:12}]
}]
Here's the fiddle: http://jsfiddle.net/agjZB/23/
If i remove the null datapoint, everything works fine. Thanks for the extra eyes!
You have to make the NULL point the same format as your other points.
Or, don't include it. If you have no data for timestamp x why include it or if you have no data at all why include it?
Example of option 1:
series: [{
data: [
{x:1389254400000,y:10},
{x:1389554400000,y:9},
{x:1389554400000,y:null},
{x:1389854400000,y:12}]
}]
For line chart you shouldn't use points with the same x value, becasue a few feateaures like tooltip will not work correct. You need to set scatter type and lineWidth as 2.
i got a pool of data with exact same value in a scatter plot with HighCharts as in :
http://jsfiddle.net/DvbHa/1/
i want to be able to display them in tooltip when i go over it to be able to click them individualy
is something like that possible?
Thx all
Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: ''
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x}, {point.y}'
},
series: [{
data: [[10, 5],
[15, 6],
[10, 5],
[15, 7],
[13, 6],
[13, 6]]
}],
});
});
One option that is implemented in most major data visualization software packages is jittering - a function that adds small amounts of random noise to the data points so that each data point is slightly offset from it's actual data values.
This is a trade off with precision, of course, but those are the kinds of choices that are to be made when displaying data.
There is not a jittering option in Highcharts, but with a little digging you should be able to find or create a solution.
I have had some moderate success doing this on the server side before sending the data to the chart.
First check for any duplicates. If there aren't any, go no further.
If there are, create an array of any duplicate points for any point that has duplicates.
Loop through each array and add random decimal values to the x and y values of each point.
To add click events, use plotOptions.scatter.events.click.
However, I don't know what is the purpose of displaying the same points in the same place with the same value.
Increase size of the plot by using marker radius and you can differentiate the plots at same location.
marker: {
radius: 13
}
http://api.highcharts.com/highcharts/plotOptions.spline.marker.radius
See this one helps or not
Since 7.0.2, HighCharts now does officially support jittering for scatter plots.
See here: https://api.highcharts.com/highcharts/plotOptions.scatter.jitter
Is it possible reference a point from a series within the valueSuffix parameter?
I want to include a percentage value within the Suffix by dividing the height of the series 1 column by the height of the series 2 column.
So something like the following:
valueSuffix: ( series[1].max / series[2].max ) + ' %'
Is this possible?
Thanks in advance!
Armin
The API states this : valueSuffix: String
Which means the valueSuffix can only be a String. If you want something more complex than a string, consider using tooltip.formatter instead
Inside the formatter you will have access to the chart as this.series.chart and from the chart you can then access any series or any point you may wish to