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.
Related
I'm currently working on a time series line chart in Highcharts. I need to add major tick marks on the y-axis for all ticks except the first (i.e. major ticks at 0, 5, and 10 but only 5 and 10 have tick marks). Does anyone know of an easy way to accomplish this?
I would recommend the tickPositions property, or the tickPositioner.
It leaves you having to define the placement of all of the ticks that you do want to show, but I don't know of another way to accomplish it, other than editing the SVG directly.
Reference:
http://api.highcharts.com/highcharts#yAxis.tickPositions
http://api.highcharts.com/highcharts#yAxis.tickPositioner
This obviously isn't ideal because you want your chart configurations to live in your Highcharts definitions, but using pseudo-selectors to hide the last tick is functional.
Highcharts assigns your axis ticks inside of an svg element with the class .highcharts-axis. Assuming you want to hide it for all charts, add the following to your CSS file:
.highcharts-axis :last-child {
display: none;
}
You can use the following:
https://api.highcharts.com/highcharts/xAxis.showFirstLabel
https://api.highcharts.com/highcharts/xAxis.showLastLabel
Demo:
Highcharts.chart('container', {
xAxis: {
showLastLabel: false,
},
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]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
I know it is too late, but may be someone try to find better solution, use
tickPositions: [],
here example http://jsfiddle.net/q602Lsmc/
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/
As you can see from: http://jsfiddle.net/EwZsS/1/.
Four columns overlap to one line when there's just a group of series data, like that shows below.
series: [{
name: 'Tokyo',
data: [[Date.UTC(2013, 0, 6), 49.9]]
}, {
name: 'New York',
data: [[Date.UTC(2013, 0, 6), 83.6]]
}
]
And it will well perfomed when I add another group of series data(i.g. http://jsfiddle.net/EwZsS/2/).
I don't know where the problem is. How could I fix the problem?
The problem is that each series has exactly one point, so Highcharts aren't able to calculate required space for each series. For such cases you need to use pointRange, see: http://jsfiddle.net/Fusher/EwZsS/3/
Ref: http://api.highcharts.com/highcharts#plotOptions.column.pointRange
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.