I'm seeing this error when I create a line chart with a single y-axis.
Uncaught TypeError: Cannot read property 'series' of undefined highcharts.3.0.1.js:147
It seems that the series is a bit displaced to the left. The leftmost tool tip is hanging off the chart where the y-axis names are showing. All the tooltips are off a bit and if I mouse all the way to the right of the chart I see this error over and over in the console.
Interestingly, if I zoom in and then hit the 'reset-zoom' the chart renders properly and the problem goes away.
unfortunately, creating a fiddle will be hard as I build my config options on the fly. I am using addSeries to add my series to an empty chart once it has been displayed.
Thanks in advance for any help or tips.
-Dale
In general, without code it is really hard to find issue, just copy your 'options on the fly' which reproduce issue, please.
However, most probably you are trying to add series for axis, which doesn't exists. For example:
yAxis: { },
series: [{ yAxis: 1 }] <-- obviously there is only one yAxis
export class xyzComponent implements OnInit {
highcharts = Highcharts;
chart;
chartCallback;
title = 'myHighchart';
chartConstructor = "chart";
chartOptions: {};
ngOnInit() {
this.chartOptions = {
chart: {
type: "spline"
},
title: {
text: 'Average Vegetation and Soil Moisture Index'
},
}
}
}
it's for Angualar
Related
I have a chart that works very well when using the data module with Google spreadsheets. However I need to stop using Google sheets and use CSV on my own server instead. Some of my charts are working, but some aren't. Here's one that is not working. It uses the second column to set the point color, but it's not recognizing it. Any idea what might be wrong here? I edited some of the csv entries to try to make it work, but it's not working much:
http://jsfiddle.net/jmunger/cf6L4bmk/20/
var chart = Highcharts.chart('gfx', {
chart: {
type: 'bar',
},
data: {
csv: document.getElementById('csv').innerHTML,
itemDelimiter: ',',
seriesMapping: [{
color: 2,
label: 3
}]
}
});
console.log(chart);
That problem seems to be a bug in a data module, so I reported it here: https://github.com/highcharts/highcharts/issues/13283
As a workround you can use other color formats:
0;1;blue
1;2;rgb(155,155,55)
2;3;red
Live demo: http://jsfiddle.net/BlackLabel/0gjbn4m6/1/
i need to do something, i tried everything but i cannot get what i want.
I have one chart in one container, and at some point a have to render that chart to another div, but without losing the first one, so... i need to duplicate that chart but in a new container.
Im able to get the chart that im refering to, but i need something like getting the options of this chart so i can initialize another chart, with same options but in a different container.
The chart is generated dinamically, so i do not have the options before it is rendered, so the only way i can get the option in order to replicate the chart i getting the options of an already painted chart.
Is there any way to achieve that?
Thank you.
You can use chart.userOptions property to get the options needed to create a second chart:
var chart = Highcharts.chart('container', {
series: [{
type: 'column',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
xAxis: {
max: 10
}
});
$('#duplicate').on('click', function() {
Highcharts.chart('container2', chart.userOptions);
});
Live demo: http://jsfiddle.net/BlackLabel/9q70mvky/
I am trying to display a highchart graph and when rendering in FF or IE, I get the above error, but in Chrome and Safari I works without fail. I think it is to do with the animation, but switching the animation off, then subsequently works for line charts, but pie charts does not show a chart at all.
$(canvas).highcharts({
chart : {
type: 'pie'
},
colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
credits: {
enabled: true
},
title : {
text: title
},
plotOptions : {
series : {
animation : isWebkit()
}
},
series: data
});
......
Thank you for your help, I am still having the issues, but I have coded around it for now. I am sure there is lots I did not tell you in my original question that would influence the answer (such as I am using bootstrap as my UI platform, and the chart is in a tab which is not visible when it is built, also on the page is a spreadJS control, and looking at the stack trace, this might have an influence and finally the data object would need expanding as I am setting more options than just the values in your jsfiddle example), so I think it is better if I ask the question again once I can expose the other challenges on the page.
So, again thank you, and I will need to ask the question more clearly.
I have a unsort data (on x-axis) and using Highcharts to display the graph. I knew the x-axis must sort to show the tooltip as the Highcharts document wrote. But my data could not be sorted by some reasons, so could anyone meet this problem before, please give any idea/solution to show the tooltip without sort x-axis data. If I sort, my data will be wrong.
My js:
var data = [
[5.875, -20],
[8.1875, -30],
[8.875, -40],
[9.5, -50],
[10.125, -60],
[10.5, -70],
[10.875, -80],
[11.375, -90],
[11.6875, -100],
[11.875, -110],
[12.0625, -120],
[12.625, -130],
[12.4375, -140],
[12.625, -150],
[12.5, -160],
[12.4375, -170],
[12.4375, -180],
[12.375, -190],
[12.25, -200],
[12.1875, -210],
[11.9375, -220],
[11.625, -230],
[11.5, -240],
[11.125, -250],
[10.75, -260],
[10.625, -270]
];
$('#container').highcharts({
series: [{
data: data
}]
});
Or please check here http://jsfiddle.net/vuong/jedLowyv/4/
Thank you so much and have a nice day.
You have two options:
sort your data: http://jsfiddle.net/jedLowyv/5/
use scatter series with lineWidth: http://jsfiddle.net/jedLowyv/6/ (not: tooltip will show up only when hover one of markers directly)
I am drawing various charts on a page, and would like to avoid to have to declare in each chart, the properties that are common to every chart.
I tried an example found online, where the common part was in a {settings}, but when I try to load it, I had no luck.
I am using Highcharts. Any suggestion is more than welcome....with 16 charts on one page, I am just going crazy.
You can use merge function. See the example:
http://jsfiddle.net/nyQ2L/
var defaultOptions = {
chart:{
type:'line'
},
title: {
text:'common title'
}
};
var opt1 = Highcharts.merge(defaultOptions,{
series:[{
data:[1,2,3]
}]
});