I want to add chart Axis and chart Series dynamically like this.
$.each(seriesOptions, function(){
chart.addAxis({
id: this.name,
title: {
text: this.name
},
lineWidth: 2,
opposite: true
});
chart.addSeries({
name: this.name,
data: this.data,
yAxis: this.name
});
});
My solution works quite well: jsFiddle
But after loading the chart, I can only see the yAxis but no series. If Im clicking on a specific range (rangeSelector) - the series becomes visible.
I think there is an issue with the rangeSelector and yAxis? Because when Im removing the rangeSelector I will get an "NodeNotFound" error.
Any suggestions?
Cheers
Related
Using Highstock, I wish to draw a candlestick chart over a line chart.
I know it sounds weird, but I need to rotate the candlestick chart by 90 degrees clockwise.
The code I have now is:
Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/new-intraday.json', function (data) {
// create the chart
Highcharts.stockChart('container', {
title: {
text: 'AAPL stock price by minute'
},
navigator: {
enabled: false
},
rangeSelector: {
enabled: false
},
series: [{
name: 'AAPL',
type: 'candlestick',
data: data,
tooltip: {
valueDecimals: 2
}
},{
name: 'TEST',
type: 'line',
data: data
}]
});
});
JSFiddle here
What I want to get is the following (something like...):
Any (simple) idea?
Highstock is not adapted to this kind of customization. The only simple way seems to be creating two overlapping charts - one inverted and one with transparent background, but we have to take into account many limitations, like for example tooltip.
chart: {
inverted: true,
...
}
Live demo: https://jsfiddle.net/BlackLabel/nb1jyaq5/
API Reference: https://api.highcharts.com/highcharts/chart.inverted
I have a Highcharts chart that works great and has custom formatting for the yAxis labels using the following formatting.
yAxis: {
labels: {
formatter: function () {
var newNumber = formatNumber(this.value, 1);
return newNumber;
}
};
However, when I dynamically add a series like below, the yAxis labels do not have the same custom formatting. It looks like they just end up using the default Highcharts number formatting.
chart.addSeries({
data: newData,
yAxis: newDataName
});
How can I make it so the dynamically added series has the same label number formatting as the originally loaded series?
Also, note that I need to name the dynamically added series ("newDataName") so that I can reference it again later to remove it.
And here is how the axis is added dynamically as well. Because to clarify, I am adding a series, but also adding an axis to display that series.
chart.addAxis({
id: theData,
title: {
text: "newAxis"
}
});
Since you are dynamically adding both a series and a new axis that the series should be using, this axis also needs to include the formatter details. For example (JSFiddle):
// New axis
chart.addAxis({
id: 'new',
// Which also has the label formatter
labels: {
formatter: function () {
return formatNumber(this.value, 1);
}
},
title: {
text: "newAxis"
}
});
// New series which uses the axis
chart.addSeries({
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
yAxis: 'new'
});
Thanks for your help. I have having a heck of a time trying to get something to work which is throwing me for a loop..
As seen in this jsfiddle (code copied below) i have a bar chart with a really long label which is wrapping.
What i am hoping to do i max out the label portion of the chart so that the label doesn't wrap while reducing the size of the actual data chart.
As an example; in the jsfiddle the label is maybe 30% of the total width and the bar data is 70%. Knowing my data, the labels would take up 80% of the width and the data would be in the last 20%.
Thoughts? Thanks, Steven.
$(function () {
$('#container').highcharts({
chart: { type: 'bar' },
xAxis: {
labels: {
style: {
"textOverflow": "none",
}
} ,
categories: ['Jan is the first month of the year and if you have a problem with that', 'Feb is the second']
},
series: [{ data: [29.9, 71.5] }]
});
});
Okay, looks like I got what i was looking for. Hope this helps someone else.
The key for me was setting the maringLeft attribute on the chart:
chart: {
type: 'bar',
marginLeft: 460
},
That, along with modifying the width, 'min-width' and useHTML on the label and lable style for the xAxis (Bar chart)
xAxis: {
categories: ['Short Name', 'Much Longer Location Name and if it is true then cool and if you want'],
labels: {
style: {
width: '400px',
'min-width': '350px'
},
useHTML : true
}
},
Thanks, Steven.
I have found this jsfiddle very helpful when I started working on paginated highchart columns. On top of this good example, I would like to know how I could change the x-axis labels into each data's corresponding name. (Ex. Along the x-axis, we should find the names of 'Fred G. Aandahl', 'Watkins Moorman Abbitt', 'Amos Abbott', etc. with their corresponding y-values and must change accordingly when the "Next" button is clicked.)
I have tried adding "xAxis" option inside the highcharts portion but still had no luck.
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
labels: {
formatter: function(){
return this.value;
}
}
},
series: [{
data: []
}]
});
and
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
labels: {
format: '{value}'
}
},
series: [{
data: []
}]
});
Can someone help me regarding on what I am missing in this example? It will be very much appreciated.
You can set type of xAxis to category and without category array the value in axis will be taken from the point. But you will need to change your setData call to
pie.series[0].setData( data.slice(from, to), true, true, false );
xAxis: {
type: 'category'
},
Example: http://jsfiddle.net/kpxp4/8/
I am able to change the x-axis labels accordingly by adding
pie.xAxis[0].update({
categories: category.slice(from, to)
})
after the setData call, where category is an array of all the x-axis labels that you want to display in correspondence to each y-axis value. Moreover, the
xAxis: {
type: 'category'
}
portion, as suggested by #Kacper Madej, works for the specific data format given originally. However, the pie.xAxis[0].update() could be used on a more general sense given that you know the array of x-axis labels that you want to use (regardless of the data or series format that you have).
Here is the link to the jsfiddle.
Hope this could be of any help, too.
I found out a problem with chart (highcharts 2.3.5) when i enter datetime series with only 1 data entry, it renders it with incorrect placement on x-axis and wrong point formatting.
here is the example: http://jsfiddle.net/LAcSw/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2010, 0, 1), 29.9]
]
}]
});
});
Is there a fix know or something(it was fine on 2.2.5)?
Since you only have a single point HighCharts is making its best guess as to the yAxis range as well as what the label is on the point for the xAxis.
You are not defining any sort of formatting for the xAxis datetime labels - and HighCharts only has one point to work with so it defaults to time. If you assign a formatter for the xAxis labels you can get it to do what you want.
Here is some rough code to show you what this does:
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
}
}
},
yAxis: {
min: 0,
max:50
},
And here is your jsFiddle updated.