So I'm basically trying to line up a highcharts chart exactly with an html table that's being rendered just above it. I'm just wondering if there's any way to have an absolute spacing in pixels between each xAxis tick?
The table's cells have a fixed width and I'm rendering the same data in both. So far it lines up pretty close, but I'm thinking if I can't fix the spacing of the points, it may be impossible to line up properly.
Have you tried to use tickPixelInterval feature?
Demo: https://jsfiddle.net/BlackLabel/hauco6s0/
Highcharts.chart('container', {
xAxis: {
tickPixelInterval: 20
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
API: https://api.highcharts.com/highcharts/xAxis.tickPixelInterval
If this wouldn't help - please reproduce your case on some online editor which I could work on.
How to highlight a point or how to represent a point with colour dynamically while chart loading and without performing any event [It's Not like mouse over, mouse out or click].
Please help in this regard and Thanks in advance.
you can simply mention the color for the point right at the value itself. that will give the color to that point.
data: [{
y: 29.9,
color: 'red'
}, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
Here the first point will be red and all other points will be of default color.
Here is a working example for the same
Hope this is what you are looking for.
You can chose any point and call setState function.
chart.series[0].data[1].setState('hover');
http://jsfiddle.net/rqao9dq7/
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?
So I am plotting two column series on time axis. columns in one series are wider that other series( approx 3X).
So what I want is columns for both series should perfectly overlap but, thats not happening. The narrower columns starts from the center of wider columns.
It looks like you want each 4 quarterly columns to line up with the yearly ones. The reason this isn't happening is that the yearly columns are centered on the years, rather that starting on the year. You can adjust this using the pointPlacement option:
series: [
{
name: 'Yearly Returns',
color: 'rgba(167, 169, 172, 0.3)',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointWidth: 62,
enableMouseTracking: false,
pointPlacement:'between',
pointInterval: 365 * 24 * 3600 * 1000 // yearly
},
http://api.highcharts.com/highcharts#plotOptions.column.pointPlacement
http://jsfiddle.net/wMhJn/
I can hide a chart dynamically when the chart is displayed using series.setVisible( ).
However I want my chart series to be hidden when the chart is initially displayed (I only want the series data present for the tool tip). Is there a way to set the series visibility to false in the initial configuration.
You can use the visible option of the serie definition.
visible: Boolean Set the initial visibility of the series. Defaults to
true.
Code:
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
visible: false
}, {
data: [129.9, 271.5, 306.4, 29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4],
yAxis: 1,
visible: false
}]
Here a working fiddle: http://jsfiddle.net/IrvinDominin/CkLLt/1/
The only way to show extra data in the Tooltip is to use the
pointFormatter:function(){}
in the tooltip section of the configuration.
You can pick the extra data you need from a set of data provided by the server that supplies data, but which you do not output as a series in the chart. You need to pick the value for the current date based on the current point in the graph and append it to the result of the tooltip formatter function.
This way, however, the extra data you want to show in the tooltip cannot appear as a line in the chart, as you aren't creating a series for it.