Develop Reference

How to add inline legends to line / area mixed chart in highchart

I have a chart which has part line and part area stacked. In the first part (area) I want to add an inline legend as it is shown in this example (ie where it says Asia)
https://www.highcharts.com/demo/area-stacked-percent
These are the example options but I do not see how to specify that or if this is the default way to show legends in this plot
In my example, I cannot put the legends inside the area part. Tried to add title in yAxis. I also tried to add an annotation but it did not work:
https://jsfiddle.net/hkpna40r/1/
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 4
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: Date.UTC(2019, 11, 2),
y: 3
},
zIndex:100,
text: 'Arbois'
}],
}],

You can achieve what you want by attaching a module called series-label and set plotOptions.area.label like that:
plotOptions: {
area: {
label: {
enabled: true,
onArea: false
}
},
line: {
label: {
enabled: false
}
}
}
Note, annotations also work but you have to attach annotations module separately.
Demo:
https://jsfiddle.net/BlackLabel/5utLhenb/
API reference:
https://api.highcharts.com/highcharts/plotOptions.area.label
https://www.highcharts.com/docs/advanced-chart-features/annotations-module

Is it possible to have different colored graphs in a single series in HighCharts?

I have a single series column graph with x-axis as datetime and y-axis as some constant value. I would like to show the columns in different colors based on some information I have , is this possible ?
e.g. I have dynamic data coming in to plot my graph,I use series.addPoint({x:x,y:value,extra:info}, false, false) to plot the same. Based on the info, how can I vary the colors?
I am pretty new to javascript and highcharts. So pardon my limited knowledge, any help in the right direction would be appreciated.
Updated code:
if(type=='a')
color='#7cb5ec';
else
if(type=='b')
color='#f45b5b';
else
if(type=='c')
color='#8085e9';
else
if(type=='d')
color='#2b908f';
else
color='#e4d354';
series.addPoint({x:x,y:value,extra:info,marker:{fillColor:color}}, false, false);
I have also set the colorByPoint: true option. The series.addPoint function runs in a loop which runs as and when I get my data.

Try out the following
plotOptions: {
column: {
colorByPoint: true
}
},
colors: [
'#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'
],
Fiddle link :)
Update 1:
Dynamic series fiddle:)
Update 2:
Use the following code to have specific color for specific bar
chart.series[0].addPoint({y: Math.random() * 100, color:'#659355'}, true, true);

You also can put colorByPoint: true in series option.
This way I do in my project, share for whom concern.
plotOptions: {
series: {
pointWidth: 30,
colorByPoint: true,
dataLabels: {
format: '{point.y:.0f}억원',
enabled: true,
align: 'right',
color: '#FFFFFF',
x: -5,
y: 3,
style: {
fontSize: "16px",
color: '#fff',
fontWeight: '500',
}
}
}
},

colors: Array(3).fill().map(()=>`#${Math.floor(Math.random()*16777215).toString(16)}`)

Stop HighCharts increasing width of line on hover

I am using the latest version of HighCharts to build a chart with multiple trends. By default HighCharts increases the thickness / lineWidth of a line when the user's mouse hovers over it. Because I could have ~10 trends on the chart I would like to remove this feature, meaning that the thickness of the line does not change on hover.
jsFiddle of code so far
I believe I need to set this in the plotOptions{} section. I have tried adding the following without success:
plotOptions: {
series: {
mouseOver: {
lineWidth: 2
}
},
marker: {
enabled: false,
states: {
hover: {
lineWidth: 2
}
}
}
},
I would, however, like to retain the marker that denotes where the mouse of positioned:

Make this below change (Set the states mouseover to disabled state)
plotOptions: {
series: {
lineWidth: 2,
states: {
hover: {
enabled: false
}
}
},
DEMO
In that case make lineWidth: 1 for hover
plotOptions: {
series: {
lineWidth: 2,
states: {
hover: {
lineWidth: 1
}
}
DEMO 2

What you need here is the lineWidthPlus property.
plotOptions: {
series: {
states: {
hover: {
lineWidthPlus: 0
}
}
}
}
This way, no matter what else you change, the chart will not change the lineWidth when hovered.
API Reference:
http://api.highcharts.com/highcharts#plotOptions.series.states.hover.lineWidthPlus
Your fiddle updated:
http://jsfiddle.net/jlbriggs/4oypoeom/8/

Highcharts column and area chart, how to make area chart go to the edge?

I have a chart that is a column chart rendered on top of a area chart. Here is an example:
http://jsfiddle.net/78p42/4/
Is there a way to make the outer edge of the area chart to match up with the outer edges of the first and last columns in the column chart? In case you are not sure what I mean, please see this image I created.
I figured there would be a way to do it in the plotOptions for the area charts, but I can't find a way.
plotOptions: {
column: {
borderWidth: 0,
pointPadding: 0.1,
groupPadding: 0,
states: {
hover: {
enabled: false
}
}
},
area: {
lineWidth: 0,
marker: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
pointPlacement: 0 // I have noticed that this will shift the whole graph over, but then there is a huge gap on one side of the graph
}
},
Thanks for your time.

Highcharts, display marker on selected point only

I would like to display spline graph without marker on the line. This is done.
But now, When a point is selected, the marker doesn't appear.
I found a little hack to do what I want. In plotOptions, radius is set to 0.1 to be hidden by the line width.
plotOptions: {
series: {
allowPointSelect: true,
marker: {
radius: 0.1, // hack to show selected point
states: {
hover: {
radius: 5
},
select: {
radius: 5
}
}
}
}
}
}
Complete code is here : http://jsfiddle.net/ManUtopiK/7GXeT/
This is an HighCharts bug or I made a mistake in graph options ?

If you set your marker to have enabled: false you still show the marker point if you hover over the point (when the tooltip popup appers).
See updated fiddle here:
plotOptions: {
series: {
allowPointSelect: true,
marker: {
enabled: false,
//radius: 0.1, // hack to show selected point
states: {
hover: {
radius: 5
},
select: {
radius: 5
}
}
}
}
}