Develop Reference

Highcharts Automatic resizing of indicators when adding axis

I am storing chart data in localstorage.
Then I add them to the chart.
chart_obj.addAxis({
id: element.yAxis,
lineWidth: 1,
lineColor: '#08F',
offset: 0,
});
chart_obj.addSeries({
type: element.type,
linkedTo: ''+element.linkedTo+'',
yAxis: element.yAxis
});
As a result, my height indicator is on a different indicator.
The thing is that you have to set the height and position manually there.
But, when you add an indicator from the menu of indicators, it is added normally.
Example
How does adding yAxis automatically recalculate the height?
I tried different methods from the API, read the forum - but nowhere found information on how to do it.

To ensure that the series do not scale, you need to do an update on the axes and set their top and height.
chart_obj.yAxis[0].update({
title: {
text: 'updated'
},
height: '50%',
top: '50%'
})
chart_obj.addSeries({
type: 'ao',
yAxis: 1,
greaterBarColor: '#00cc66',
lowerBarColor: '#FF5E5E',
linkedTo: 'AAPL',
showInLegend: true
});
chart_obj.yAxis[1].update({
title: {
text: 'updated'
},
height: '50%',
top: '0%'
})
},
DEMO: https://jsfiddle.net/BlackLabel/u3s2cjyv/

How to update current view in Highstock / Highcharts based on new Plotlines?

I have a graph, whereby users can add plotlines themselves by clicking a button. Often, those plotlines are added outside the current view of the graph, which means the user has to manually zoom out to search for the plotline they added. Is it possible for HighStock to dynamically change its current view based on added Plotlines?
Check out this example here:
http://jsfiddle.net/Ltgzwpo2/2/
If you click on the button, a plotline is added OUTSIDE of the current view, i.e. you need to zoom out to find the plotline. Is it possible for the chart to dynamically zoom out itself upon the adding of a plotline?
This is the code I use to add a plotline:
$("#button").click(function() {
chart.xAxis[0].addPlotLine({
value: Date.UTC(2015, 10, 5),
color: "green",
width: 1,
dashStyle: 'ShortDash',
label: {
text: "this appeared outside of the current view!",
align: 'left',
y: 5,
x: 3,
style: {
fontSize: "12px"
}
},
zIndex: 10
});
});

You can use axis.setExtremes() to set the visible area.
var value = Date.UTC(2015, 10, 5);
chart.xAxis[0].addPlotLine({
value: value,
color: "green",
width: 1,
dashStyle: 'ShortDash',
label: {
text: "this appeared outside of the current view!",
align: 'left',
y: 5,
x: 3,
style: {
fontSize: "12px"
}
},
zIndex: 10
});
var range = 1000 * 3600 * 24 * 30;
chart.xAxis[0].setExtremes(value - range, value + range)
example: http://jsfiddle.net/cqwk84dz/

How do you position the x-axis labels along the line y=0 using Highcharts?

I'm trying to move the x-axis labels so that they appear along the line x=0. The scales are constantly changing, so I don't want to set the location using pixels, as y=0 may not be in the same location for each plot.
I tried looking up this question on this site and someone recommended using "crossing:0," as shown below, but that doesn't work.
xAxis: {
min: -20,
max: 20,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
crossing:0,
title: {
text: 'some value',
},
If someone could help me with this positioning, I would appreciate it.
Here's my JsFiddle: http://jsfiddle.net/z7eyv/35/

crossing is not an out-of-the-box feature of Highcharts.
Based on what I could find, it seems what you want is the "Crossing-Specific-Value" Highcharts plugin, which is located here: http://www.highcharts.com/plugin-registry/single/6/Crossing-Specific-Values
Update (July 5, 2016): To address the comments about your fiddle, you need to explicitly add the "Crossing-Specific-Value" plugin after your bring in the Highcharts library (see the third line below):
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/crossing-specific-value/master/crossing-specific-value.js"></script>
Now, adding the crossing variable to your x-axis will show the labels as in the demo.
I made a few tweaks to your fiddle (see http://jsfiddle.net/brightmatrix/z7eyv/38/) to better suit what you're asking.
1) Using the demo as the default, it seems that the plugin puts your labels above the axis line. I've seen instances where the labels are better ready below the line so I did the following:
xAxis: {
crossing: 0,
opposite: true,
min: -20,
max: 20,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
title: { text: '' },
labels: { y: 15 } // pushes the labels down below the crossing line
},
2) I then adjusted the plot line for the y-axis as follows:
yAxis: {
min: -20,
max: 20,
tickInterval: 1,
endOnTick: false,
title: { text: 'some value' },
plotLines: [{
value: 0.1,
width: 1,
color: 'black',
zIndex: 10 }] // moves the plot line above the axis gridline
},
The zIndex value of 10 means the line will show up on top of the normal gridline. Here's how this looks:
Please let me know if this better answers your question.

Highcharts: Only animate pie size with donut graph / prevent innersize animation

Fiddle: http://jsfiddle.net/jakelauer/ZENuS/
Highcharts JS call:
$(function () {
$('div').highcharts({
chart: {
backgroundColor: 'rgba(0,0,0,0)',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
width: 500,
height: 500,
margin: [0, 0, 0, 0]
},
title: {
text: null
},
plotOptions: {
pie: {
minSize: 0,
size: 500,
animation: {
duration: 5000,
easing: 'linear'
}
}
},
series: [{
type: 'pie',
innerSize: 486,
data: [1]
}]
});
});
As you can see in the fiddle, while the graph grows, the thickness of the line animates as well as the percentage of the circle it takes up. I'd like the line to stay the same thickness the whole time, and only change how much of the circle it fills. Is this possible?

The Highcharts API only provides options to calibrate the duration and easing of this animation, as you've already seen. The default "scaling" animation into the charts final height/width and thickness of its "donut" cannot be altered. You either have no animation (animation: false) or this "scaling" animation with control over the duration and easing. Like I said, these are the limitations that exist within the Highcharts API; I cannot speak to the feasibility of coming up with some magical workaround via the jQuery UI or any other framework.
In summary:
no?

Unfortunately this option is not possible, but you can request your proposition on http://highcharts.uservoice.com/

Set maximum bar width in ExtJS 4 column chart?

I have a 250px wide column chart, it looks great when there are 10+ items in the series, but when there's only 2-3, the bars are drawn really wide, which looks somewhat odd.
_____
| |
| |
-----|-----
I can set the width in the series config:
{
style: { width: 25 }
}
This works, but the thinner bars are still left-aligned with their previous position, so they don't match up with the axis tick and label.
Like so:
_
| |
| |
-----|-----
I don't want to change the axis spacing, I want to end up with widely-spaced, 25px bars (that are correctly centered on the axis tick):
_
| |
| |
-----|-----
Any ideas?

renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: color,
width: 50,
x: Math.max(attr.x, attr.x + (attr.width - 50) / 2)
});
}

Maybe a bit to late but this is my solution
renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: color,
width: 50,
x: Ext.getCmp('chart_id').axes.items[1].inflections[value][0] - 25
});
}
In this example I read the x axe and find any given point (label stripes) than I looped though my bars, you can use a count or something and use in instead of value. Hope it works!

//try like below
series:[
{...
style:{
minBarWidth:5,
maxBarWidth:5
}
},
{...}
]

I think the problem is that the chart you are looking for is Cartesian one and the column chart doesn't work for you because it hasn't any exact X value.
So, I simulate the Cartesian chart (like Line chart) to look like the column chart like this:
It's a trick somehow but it works fine for me.
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['min-X','max-X']
}, {
type: 'Numeric',
position: 'left',
fields: ['min-Y','max-Y']
}],
series: [{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line1-X',
yField: 'line1-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line2-X',
yField: 'line2-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line3-X',
yField: 'line3-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line4-X',
yField: 'line4-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
}]
And the data:
{
line1-X: 2, line1-Y: 0,
line2-X: 5, line2-Y: 0,
line3-X: 5.5, line3-Y: 0,
line4-X: 8, line4-Y: 0,
min-X: 0, min-Y: 0,
max-X: 10, max-Y: 100
},{
line1-X: 2, line1-Y: 40,
line2-X: 5, line2-Y: 80,
line3-X: 5.5, line3-Y: 60,
line4-X: 8, line4-Y: 100,
min-X: 0, min-Y: 0,
max-X: 10, max-Y: 100
}
But in this approach you have to know the maximum number of Columns(Lines) you have. And each time insert Zero(0) data to one you don't want to show. If you don't know the number of Columns(Lines) you have to create them dynamically.
This is my idea and it works the way I want it. Maybe it helps you to find your solution.

try using the "gutter" property to set the gap between the column.