Develop Reference

How to draw a straight dashed line across chart at zero

I'm trying to draw a straight dashed line across my linear chart at zero.
I got it to work by drawing another series with all the points on the y axis at 0 and it works ok but I would like to change the style to 'Dash' and also remove the annoying series name it adds to the legend by default. I don't want it to appear in the legend. I tried setting name to '' for this part.
var zeroSerie = {
data: firstSeries,
dashstyle: 'Dash'
};
zeroSeries.name = '';
soarChart.addSeries(zeroSerie, false)
I would also very much like to set the colour to red and 'stroke-width': 2,
Thanks for any help

I think that is better to use the plotLines option:
yAxis: {
plotLines: [{
value: 0,
color: 'red',
zIndex: 2,
dashStyle: 'dash'
}]
}
Live demo: http://jsfiddle.net/BlackLabel/zan69hm7/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines

Highcharts Donut Chart customization

I'm working with highcharts and aiming to make a chart similar to this:
Now I've been playing around with the whole ordeal for a while now and I've come been able to reach the following point: http://jsfiddle.net/ccjSy/24/
$(function () {
$(document).ready(function () {
var chart = null;
var categories = ['Body Fat', 'Lean Mass'],
name = 'Body Fat vs. Lean Mass',
data = [{
y: 69,
color: '#F0CE0C',
drilldown: {
name: 'Body Fat',
color: '#F0CE0C'
}
}, {
y: 207,
color: '#23A303',
drilldown: {
name: 'Lean Mass' ,
color: '#23A303'
}
}];
// Build the data array
var browserData = [];
for (var i = 0; i < data.length; i++) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
}
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'donutchart',
type: 'pie',
spacingTop: 0
},
title: {
text: 'Your Body Fat vs Lean Mass',
style: {"color": '#7d7d7d'}
},
series: [{
name: 'Weight',
data: browserData,
dataLabels: {
style: {
fontFamily: 'ArialMT',
fontSize: '15px',
fontWeight: 'bold',
color: '#7d7d7d'
}
},
innerSize: '70%'
}],
tooltip: {
valueSuffix: ' lbs'
},
plotOptions: {
series: {
cursor: 'pointer'
}
}
});
});
});
I am thinking of leaving the space empty in the donut chart and inserting a custom circle with the Weight labeling.
However, I'm not certain how to tackle the following problems:
1) Leave more defined white spaces in between my two columns
2) How to properly align my two data labels? (As you can see in the model, they are in a straight line with neutral lines attached)
3) How to display the data underneath the two labels with both, the pounds and the percentage, as shown in the image.

Answering each of your three questions:
"More white space between columns?" -- add a plotOptions.pie.borderWidth element. The default value is 1. I used 5 to give it more white space.
"Properly align the two data labels?" -- You can compute a custom startAngle based on the two data values which will give you the correct angle to start with. Since you only have two data values in the series, that's easy.
Calculate startAngle for pie chart
var startAngle = 0 - (90 + (180 * (data[0].y / (data[0].y + data[1].y))));
Notice that if you change the y value for the first data object, the "Body Fat" portion of the pie chart will still maintain it's correct position, even as the portion of the chart grows larger or smaller.
"Display data underneath the two labels with custom formatting?" -- use plotOptions.pie.format to apply custom formatting to the pie value labels.
format: '<div style="position: relative; top: -20px; text-align: center">{point.name}<br><b><span style="font-size: 29px">{point.percentage:.0f}%</span></b> ({point.y} lbs)</div>'
Here's a working JSFiddle to see the results. You'll still need to add a dark gray circle behind the pie chart and add the "Total Weight" text but that shouldn't be too difficult.
Since I'm sure you'll be wondering about this, I should mention that there's a lot of white space under the pie chart title because it's leaving enough room for other labels that may appear above or below the pie. Since you're only using two values that will always be on the left/right sides of the pie chart, that doesn't change the fact that HighCharts is preparing to have other labels that may need to be displayed in the surrounding area.

In Highcharts, are we able to make the border of a pyramid in 'dashed' style?

I'm wondering if we could make a dashed border for a pyramid chart.
Dashed border isn't native supported by Highcharts, but for column/bar chart, I've found a simple extension to make it happen:
Highcharts.seriesTypes.column.prototype.pointAttrToOptions.dashstyle = 'dashStyle';
But for a pyramid chart, I can't find a similar way to do that.
Is there any way we could make the border of a pyramid 'dashed'?
Here is a fiddle:
http://jsfiddle.net/scottszb1987/18009rf1/6/

In the chart.load event, you can loop over each point, call attr() on graphic element and apply the dashStyle param.
events:{
load:function() {
var chart = this,
series = chart.series[0],
each = Highcharts.each;
each(series.data, function(p, d) {
p.graphic.attr({
dashstyle: 'Dash'
});
});
}
}
Example:
http://jsfiddle.net/0p62up21/
DashStyles:
'Solid',
'ShortDash',
'ShortDot',
'ShortDashDot',
'ShortDashDotDot',
'Dot',
'Dash',
'LongDash',
'DashDot',
'LongDashDot',
'LongDashDotDot'
http://jsfiddle.net/xccct7k7/

Highlight the corresponding y axis on mouse overr over the bar chart based on that axis in highchart

The process what i am working on it to highlight the y axis , when move the mouse over the barchart which is created based on the y axis.
I have got the ways to make the x axis change color based on the "Bold X-Axis Label on Point Hover in Highcharts Column Chart" but cannot able to apply this to get the y axis change color or make it highlighted.
In the current fiddle i have applied to change the color of the y axis, but cannot remove the color when i move the mouse from the series in the chart which is based on that y axis.
Thanks in Advance.
jsFiddle http://jsfiddle.net/X2t9H/

You would do that the same as you did the title color change:
chart.yAxis[0].update({
title: {
style: {
color: 'red'
}
},
lineColor: 'red',
lineWidth: 1
});
EDIT -
To revert the color do this:
mouseOut: function () {
chart.yAxis[0].update({
title: {
style: {
color: '#89A54E'
}
}
});
}
You had the mouseOut function in there but you didn't populate it.

Legend on bottom with highcharts

I am using highcharts to draw some charts. I use the basic line plot like this:
http://www.highcharts.com/demo/spline-irregular-time
How can I display the legend under the chart area instead of at the right?
http://www.highcharts.com/demo/column-stacked-percent
Thx

marginBottom can be used to put legend on bottom of chart. You can still use legend property to move legend for example in the middle or right(i used center).
chart: {
marginBottom: 100
},
legend: {
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0
},
Possible solution: fiddle

Having the legend under the chart is the default, so you can omit the legend propery entirely. Bear in mind that to make this look nice, you'll have to add a little to the bottom margin, otherwise the chart and the legend will overlap.
chart: {
type: 'line',
marginRight: 130,
marginBottom: 70 // Increase this to 70 or so
},
// Remove the legend property completely
Here's a demonstration.