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?
Basically, I'm trying to have Highcharts automatically draw a straight line going from the first data point to the last, so that I can see the "overall trend" more easily.
I believe this is called a "trend line" or something, but I have not found anything in the documentation related to that. It is very possible that it still has this feature, however. Does it?
As far as I am aware, highcharts does not calculate a regression or trend lines. There are some plugins that you may be able to use. Here is one that i've found, i'm sure there are others: https://github.com/virtualstaticvoid/highcharts_trendline
Highcharts does not support this out of the box, but there are some plugins in their gallery that do trend lines.
This one for example (which we have used with success), gives multiple options including linear trend and moving averages:
http://www.highcharts.com/plugin-registry/single/16/technical-indicators
UPDATE May 2018:
Highcharts now includes this functionality as part of its core offering.
https://www.highcharts.com/docs/chart-and-series-types/technical-indicator-series
HighCharts have trend line feature.
check https://www.highcharts.com/products/plugin-registry/single/22/Highcharts%20regression
check this JSFiddle also http://jsfiddle.net/3g4ryLc9/539/
series: [{
regression: true,
regressionSettings: {
name : 'Type any name of the series..',
type: 'polynomial',
color: 'rgba(223, 183, 83, .9)',
dashStyle: 'solid'
},
name: 'Test input',
color: 'rgba(223, 83, 83, .5)',
data: [
[1, 1],
[2, 3],
[3, 9],
]
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