Highstock Column Chart dragging issue - javascript

I am trying to display a stock chart with columns. But there is a strange issue I am facing right now. Even when the chart is completely zoomed out I am able to drag it.
Fiddle link: http://jsfiddle.net/j8cqzm4x/1/
Highcharts.stockChart('container', {
chart: {
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Volume'
},
series: [{
type: 'column',
name: 'AAPL Stock Volume',
data: [10,20,30,40,50,60,70,80,90,100]
}]
});
Can this behavior be avoided somehow? I have went through the documentation and none of the properties I have tried worked.
Note: In the same chart making the series as 'line' does not reproduce the same behaviour.

I contacted the Highcharts support for this. It seems there was an issue in highcharts which they have already fixed on the master branch. Using the updated code resolves the issue.
http://jsfiddle.net/j8cqzm4x/4/
<script src="https://github.highcharts.com/stock/highstock.js"></script>
That is all that was needed, using master branch form github.

Related

Highstock displayed inconsistent

I'm working on a website where I'm using HighStock. The site was working fine and then I went away for a few hours. When I came back the chart would only display one datapoint.
Looking in the code with Chrome there were no errors and the datpoints had been printed by the PHP correctly.
By a coincidence, I noticed when resized the window it would suddenly display correctly. The only thing that's changing on resize in my CSS is the containers width (parent of the chart div).
I tried taking just a few of my datapoints into a HighStock example on JsFiddle, there I see no datapoints. https://jsfiddle.net/p9jqvw41/
Highcharts.stockChart('chart2', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL Stock Price',
data: "[1574880360000,9],[1574876760000,10],[1574873160000,10]",
type: 'spline',
tooltip: {
valueDecimals: 2
}
}]
});
I also tried:
Using a proxy to visit my site, then It's displayed
correctly. (So I guess It has to be a local error?)
Using a different browser, displayed incorrectly.
Clearing Cache, still incorrectly displayed.
The only thing that would seem reasonable is that I've reached some limited number of calls to HighStock, but even that isn't consistent with some of the mentioned above.
I feel like I'm going nuts so any help would be very appreciated.
Solved: I had data in Descending order instead of Ascending, probably stopped working after update to Highchart.

How to remove the white outline/border on Highcharts 3D on setData?

I am loading a column chart in 3D with Highcharts. On the inital load, the chart works perfectly. When I use setData() to change the series, the chart gains an odd white outline around its edges.
Before:
After:
I tried a few fixes such as using edgeColor and edgeWidth, although they made no difference.
Note: If I hover over one of the columns, the outline is instantly removed on that particular item until setData() occurs again.
How can I remove this white outline from the chart?
edgeWidth should be working, however there is a bug. Reported here - thanks.
As workaround, set edgeColor: 'rgba(0,0,0,0). Demo: jsfiddle.net/hdghyz2x
Bug is fixed already by commit (4c94d34) - will be included in next release (4.1.5). Available already in github version: http://github.highcharts.com/highcharts-3d.js
like this
$('#container').highcharts({
chart: {
type: 'bar',
},
title: {
text: 'Pie without borders'
},
series: [{
borderWidth: 0,
}]
});
});

How do I get labels on Pie Chart Wedges in Kendo UI

http://jsfiddle.net/XPK3f/
I am looking to add the wedges of Pending Issued Closed actually on the wedges.
I believe the changes need to be made in one of these objects.
seriesDefaults:
labels:
visible: true,
template: "${value} ${category}",
series:
type: "pie",
data: dataSet
Here is an example of how the series will have labels in the actual chart and not just on the legend. Please see the JSFIDDLE for details.
Thanks!
pie chart http://www-958.ibm.com/software/data/cognos/manyeyes/images/pie-chart.gif?1292295884
I'm not 100% sure what you are asking, but yes, using a template inside the series-defaults labels, you can put pretty much whatever you need as the label.
seriesDefaults: {
labels: {
visible: true,
template: "${category} - ${value} clients"
}
}
http://jsfiddle.net/XPK3f/2/

Highcharts lines not being drawn until browser is resized

I'm running into issues while testing Highcharts javascript charting library on one of my pages.
The issue i'm seeing is none of the data is visible until I slightly adjust the browsers size. Before resizing the tooltip does show the points.
First I thought the issue was due to jquery tabs, but that was not the case. I added the fix from Highcharts recommendations. http://www.highcharts.com/studies/jquery-ui-tabs.htm
I tried calling the charts setSize() method after initialization to see if manually resizing would cause the lines to be viable.
Any ideas?
Here how i'm initializing the chart.
$(div).ready(function(){
var chart = new Highcharts.Chart({
chart: {renderTo: 'some-div', type: 'line'},
title: {text: 'Title'},
xAxis: {type: 'text',title: {text: null}},
yAxis: {title: {text: 'Usage'}},
series: [{name:"Series 1", data : [1,2,3,4,5,6,6,7,2,7] }],
legend: {enabled: true}
});
})
Figured it out, well I didn't exactly find the problem but found a solution.
Upgrading from version v2.1.6 to the latest (v2.3.5) solved it.
Looking through the changelog there were a few references to bug fixes with Jquery 1.7/1.8 compatibility issues possibly the reason.

How to show Area chart behind a column chart - extjs (multi-chart)

Hie,
Im working on ExtJS 4 charts.
I want to have a column chart and area chart together.
I did render these together, but the problem is - the area chart is placed over the column chart.
I'm looking for some attribute/hack, that will render the area chart BEHIND the column chart!
Sorry, I cannot place the actual code here, as i've implemented fusebox framework, so many things had to be configured.
Sample code from the extJS examples will suffice,(thanks for your time)
Thanks in advance.
They render by order. If you first define Area Chart and then define Column Cahrt in the Series part it should work.
series: [{
type: 'area',
axis: 'left',
xField: 'yourxField',
yField: 'youryField'
}, {
type: 'column',
axis: 'left',
xField: 'yourxField',
yField: 'youryField'
}]

Categories

Resources