Navigator and scroll both misbehaving in stock highcharts - reactjs

I have multiple lines to be displayed. When I load stock chart for the first time, navigator and scroll window's behavior is okay.
DEMO : https://stackblitz.com/edit/js-a8exhr?file=index.js
But when I press 1m, 1d, 1h etc options, it starts misbehaving and doesn't draw two lines in navigator.
Currently my settings are,
series: seriesOptions,
navigator: {
series: [
{
data: seriesOptions[0].data,
},
]
I tried with,
series: seriesOptions,
navigator: {
series: seriesOptions
]
but it is misbehaving.
I want it to behave like this : https://www.highcharts.com/demo/stock/compare
NOTE: I'm using lazy loading feature when I click on 1d, 1m etc options.

Options for navigator and series from the chartOptions.js file are lost because of merging. You can disable dataGrouping in plotOptions and move navigator config to one place.
plotOptions: {
series: {
showInNavigator: true,
dataGrouping: {
enabled: false
}
}
}
Live demo: https://stackblitz.com/edit/js-jjbgne?file=chartOptions.js,index.js

Related

React / High chart / Stacked bar label for each block

I am trying to have stacked bar with different color as below.
I could achive bar as below however looking for -
1. label under each block and count.
2. On click on one of the block, color for rest of the blocks should be changed (should be same as hover behaviour)
Any suggestion and help would be appreciated.
You can use stacked bar chart with enabled data labels:
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
color: 'black',
enabled: true,
y: 80
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/wg46umjp/
API Reference: https://api.highcharts.com/highcharts/plotOptions.bar.dataLabels

How do I remove the legend, labels and all the numbers from the graphs from apex charts

I've tried everything I can. If anyone can help me out, it'll be great. I want the numbers on the graphs and the legend gone
Legend and data-labels can be disabled by
const options = {
dataLabels: {
enabled: false
},
legend: {
show: false
}
}
EDIT
If you want to remove all the additional graphics, try using sparkline which will only keep the chart and hide everything.
sparkline: {
enabled: true
}

Dynamically update area.stacking from normal to null using highchart-ng

I am a very new to highstocks and I am trying to achieve something for which I couldn't find any documentation.
I have a stacked area chart. So at this stage the plotOptions looks
plotOptions: {
area: {
stacking: "normal"
}
}
And on a click of a button, I want to change it to
plotOptions : {
area: {
stacking: null (undefined, tried both)
}
}
thereby making it a basic area chart. There is no plotOptions update function in highstock and if I try to manually update it, it doesn't work. Any suggestions or ideas as to how I can make this work
Use chart.update() to update plotOptions.
chart.update({
plotOptions: {
series: {
stacking: null
}
}
})
example: http://jsfiddle.net/v3zcse3w/

Multiple Series in HighStock navigator Angular

I have Highstock graphics with an array of series objects. I d'like to display all my series into navigator. By the way, I use Angular.js and ng-Hghicharts.
I saw that solution is to add series after chart generation.
How can i do it ?
For multiple series in navigator, you need to use workaround with addSeries functions.
window.chart.addSeries({
name : "",
xAxis: 0,
yAxis: 1,
type: "line",
enableMouseTracking: false,
data : new_data,
showInLegend:false
});
http://jsfiddle.net/6fFwM/

Pie Chart - Labels In and out

Labels on the pie chart are fine to me.
Labels outside of the pie chart are not, I would like to make these disappear since on Iphone or a screen that size, labels pop out of the pie chart and are out of the screen most of the time.
I did not find anything in Sencha Architect that allowed me to overide this mechanism for labels. Would someone have an idea?
You have to extend Ext.chart.series.sprite.PieSlice and override the method sliceContainsLabel:
Ext.define('yourNamespase.CustomPieSlice', {
alias: 'sprite.custompieslice',
extend: 'Ext.chart.series.sprite.PieSlice',
inheritableStatics: {
def: {
defaults: {
doCallout: false,
rotateLabels: false,
label: '',
labelOverflowPadding: 10,
renderer: null
}
}
},
sliceContainsLabel: function () {
return 1;
}
});
And so the labels will be always inside the pie chart.

Resources