Highstock on load graph displays just one point - javascript

I am drawing a spline graph and getting a problem where in graph shows only one point on load of graph.On the other hand if I click on range selector or horizontal scroll of graph , it displays all points of graph correctly.
I tried with different data also and graph displays correctly.
Here is a fiddle to see that
$('#container').highcharts('StockChart', {
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
zoomType: 'x'
}});
I did try to understand the data pattern and googled to find if there is any issue with highstock but no avail.

Looks like your graph doesn't get the initial range status correctly, as you may notice that 'All' range button is disabled when first load.
Declare a pre-selected option: selected:0 in rangeSelector would help (http://jsfiddle.net/MS63L/)
rangeSelector: {
selected:0,
buttons: [
.... rest part are same as your original code
You can change the integer according to your need: 0 select '5m', 1 select '15m', 2 select 'All'. As this attribute means The index of the button to appear pre-selected.
See also: http://api.highcharts.com/highstock#rangeSelector.selected

Related

How to hide xAxis category of a hidden series in highcharts boxplot?

I'm trying to hide a certain series by clicking on the legend item and/or using the hide() method. The series gets hidden, but the category is still visible on the xAxis. In some other solutions for other charts, like this column chart solution, breaks were suggested, but that doesn't work on the boxplot chart. Only the leftmost and rightmost categories get hidden. Here's a jsfiddle of the boxplot that's not working:
https://jsfiddle.net/mjan7y48/
In the same application I have a column chart that hides its category immediately without any trouble. Any idea how to solve this issue?
You need to disable grouping for this solution to work:
plotOptions: {
series: {
grouping: false,
...
},
}
Live demo: http://jsfiddle.net/BlackLabel/w6nhvge7/
API Reference: https://api.highcharts.com/highcharts/series.boxplot.grouping
Importing Highstock solved the issue.

Angular. Highcharts. Column Chart. Positioning of Columns on X-Axis

I have a highchart made with Angular.JS. Each column has its own stack level and is essentially managing its own group of data
My series is an array of objects that looks like this:
[{
name: seriesGroup.name,
data: [number],
xAxis: xAxisLevel,
stack: xAxisLevel
}]
The problem I'm having is that highcharts seems to automatically add some offset styling that moves each column out of position. Ideally I want all columns centered correctly like the one for Currency. See image above where you can see the x-positioning that's getting added to the rect tag.
Is there any parameter I can set to highcharts to disable this effect? I have not been able to find anything of the sort in the API docs.
Please take a look at the fiddle for a simplified version:
https://jsfiddle.net/nz0v8w5u/
You can make it setting appropriate plotOptions.series.groupPadding property. In your case 0.5 seems working as expected. Check the code and demo posted below.
Why do you add five xAxis instead of using just one? With one axis highcharts will automatically position columns properly and the code is much easier. Check this example: https://www.highcharts.com/demo/column-stacked
Code:
plotOptions: {
column: {
minPointLength: 1,
groupPadding: 0.5,
stacking: "normal",
dataLabels: {
enabled: false
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/7pL8mj1s/
API reference:
https://api.highcharts.com/highcharts/series.column.groupPadding

Can I change series array completely in highcharts

I have a requirement where I need to change series array completely in the chart,
I have 2 legends in my chart, I wish to load a chart with one disabled legend, that's working fine,
now when the user clicks on the disabled legend corresponding data should be added automatically to the chart,
I tried same with chart.series.addSeries(), but that is giving different issues, as the new data which is to be added is not only after the first legend but it's in between those legends
chart
For eg: chart loads, with just grey legends, orange is hidden or is not added at all, on clicking on the orange colour legend I want to add this data to that chart, Please check the chart in the image
is there any way to replace series array completely.
Something like
chart.update({
series:newSeriesArray
});
I am using the bar chart from highchart.
Thanks in advance.
I have 2 legends in my chart
Do you have a separate legend for each series or do you mean legend item for each series?
Highcharts provide a possibility to set data to particular series - series.setData() method. So when a chart is initialized you can create empty series (series with name, color etc but without data array) with property visible: false, then your series will be hidden and legend item disabled:
{
name: 'Year 2016',
data: [],
visible: false
}
When user clicks legend item plotOptions.series.events.legendItemClick function will be invoked (if defined). In this function, you can set data to this particular series using series.setData() as mentioned above:
plotOptions: {
bar: {
events: {
legendItemClick: function() {
if (!this.data.length) {
this.setData([665, 234, 2344, 123, 23])
}
}
}
}
}
Demo:
https://jsfiddle.net/wchmiel/uLfcknsb/

Highcharts - No X Axis Crosshair

I have a Highcharts 5.0.14 line chart in which the x-axis crosshair will not display. The y-axis works.
xAxis: { crosshair: true },
yAxis: { crosshair: true },
Both the x-axis and y-axis documentation show objects so that's what I started with. When the x-axis wasn't working and I started Googling and found a JSFiddle with them as true rather than objects. I tried that and x-axis still does not work.
http://api.highcharts.com/highcharts/xAxis.crosshair
http://api.highcharts.com/highcharts/yAxis.crosshair
The following JSFiddle is linked directly from Highcharts' documentation. It shows crosshair: true for both x and y and it works.
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/crosshair-both/
Inspecting the HTML I found a <path> element with class="highcharts-crosshair highcharts-crosshair-category undefined" - the "undefined" class caught my eye.
I appreciate your attention, thank you.
I got this working though I don't understand why the chart configuration resulted in the x-axis crosshair not appearing.
Before wanting to use crosshairs, when I first built the chart I was populating xAxis['categories']. I soon changed some of the chart design and no longer needed 'categories'. While making the changes, rather than delete the code to populate it with the previous data I set it to null.
Long story short, once I removed 'categories' altogether the x-axis crosshair appeared.
Strange considering the documentation at http://api.highcharts.com/highcharts/xAxis.crosshair.color states (for 'color')...
The color of the crosshair. Defaults to... rgba(204,214,235,0.25) for category axes, where the crosshair by default highlights the whole category.
I'm not sure what the last part, "where the crosshair by default...", means. Regardless, crosshairs and categories must work is what the documentation reveals.

Highstock Graph not coming up properly

I am making multiseries highstock chart. Right now data is dummy , creating timestamp and some values in java-script . The issue is that graph is coming up but FROM and TO textbox do not show correct values . also not much info(week ,month,year) coming up in X axis range selector.
Also different graph resolutions like 1m 3m etc appears disabled.
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 4
},....
please see the fiddle here
Thanks.

Categories