We Keep Coding

Apex Chart - How to target and style one specific grid line?

Does anyone has clue how to target specific grid line and style like in the example?
I know how to dash line with:
grid: {
strokeDashArray: 10,
},
But how can I target grid line according to the tick value?
Desired result

Only way you can do it is via css
.apexcharts-gridline:nth-child(2) {
stroke-dasharray: 10;
}
Or use annotations instead https://apexcharts.com/docs/annotations/

I have sorted it by using annotations property. Here is an example:
// Breakdown line
annotations: {
position: 'front',
yaxis: [
{
y: 3000,
strokeDashArray: 5,
label: {
position: 'left',
borderColor: 'transparent',
textAnchor: 'middle',
offsetY: -10,
offsetX: 50,
style: {
color: '#D0D4D9',
background: "transparent",
},
text: ''
}
}
]
}

Highchart shows text in center on legend mouseover

I have the following code. What I want to do is that when mouseover on legend, text should appear in the center of the donut.
Like it happens when mouseOver at the single piece of the donut.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'distrubution_of_funds',
type: 'pie',
borderRadius: 0
},
...
series: [ {
name: 'Versions',
data: [{
"name": "№ 123 (manager)",
"y":2709.74,
"color": "#E85620"
},{
"name": "№ 333",
"y":885.5,
"color": "#92B145"
}, {
"name": "other (127)",
"y": 3151.3274920329,
"isOther": true,
"color": "#B6B9BE"
}],
size: '80%',
innerSize: '60%',
showInLegend: true,
dataLabels: {
enabled: false
}
}],
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
useHTML: true,
width: 160,
}
},
function(chart) {
var xpos = '50%';
var ypos = '53%';
var circleradius = 102;
// Render the text
chart.innerText = chart.renderer.text('$$$', 270, 210).css({
color: '#0f1122',
fontSize: '16px',
textAlign: 'center'
}).attr({zIndex: 999}).add();
});
How to do it?
for example working chart at this page

I added the jquery library in order to use less code, so this is not a vanilla javascript solution. I added the following code inside of your function(chart) { // on complete section:
$(chart.series[0].data).each(function(i, serie){
$(serie.legendItem.element).hover(function(){
chart.innerText.attr({text: serie.y})
}, function(){
chart.innerText.attr({text: '$$$'});
});
});
It's a little bit tricky, but basically, you are attaching a hover event on every legendItem element, that changes the chart innerText attribute, to the y property of the serie.
You can see it working here: JSFiddle demo

Its works here :
http://jsfiddle.net/fw71sxx6/5/
I add jquery for add this in function chart :
// Render the text
chart.innerText = chart.renderer.text('$$$', 270, 210).css({
color: '#0f1122',
fontSize: '16px',
textAlign: 'center',
display: 'none'
}).attr({
class:'getlegend',
zIndex: 999
}).add();
And I add this script:
$( document ).ready(function() {
$('.highcharts-series').mouseover(function() {
$('.showlegend').html($('.getlegend').html());
});
});

highcharts value doesn't fit container

I'm trying to use highcharts with angular using the highcharts-ng wrapper. The problem is that with the gauge type i can't get the value to fit in my container.
I did a fiddle to make it more clear : http://jsfiddle.net/x1zhmgg5/
What i want to achieve is to get my color bar to fit in the grey one, not the other way around (which would just mean getting a wider outerRadius on the pane.background) :
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
I've been going through the highchart documentation but I couldn't find anything on the yAxis to fix it.

Alter the plotOptions to this:
plotOptions: {
solidgauge: {
dataLabels: {
y: 1,
borderWidth: 5,
useHTML: true
},
innerRadius: '60%', // <--
radius: '70%', // <-- I don't know why it isn't outerRadius too...
}
}

Highcharts - outside text index label

I have this chart http://www.highcharts.com/demo/column-rotated-labels. How could I put the text from the index label outsaid columns.Thank you!

I believe you are asking how to move the labels from within the columns to outside, correct?
Unfortunately, those values from inside the column are not index labels, but dataLabels. So they are representing the values of the columns. I moved them by modifying the x property int the "dataLabels" section of the high chart. You can view how I did it at this jsfiddle:
http://jsfiddle.net/cpnq5fou/
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
x: 12, //12 pixels to move it to the right of the column, instead of inside
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}

Overlap datalabels line chart highcharts

How i can solve the problem of the values (dataLabels) ​​below?
My JSFiddle: http://jsfiddle.net/3kVJS/3/
...
series: [{
name: 'zzzzzz',
data: [17.00, 1.00, 5.00, 0.00, 0.00, 35.00, 6.00, 13.00, 233.00, 2.00, 41.00],
tooltip: {
shared: true,
useHTML: true,
showInLegend: false,
pointFormat: '<span style=\"color:{series.color}; text-shadow: 0 1px 1px #ddd;\">{series.name}</span>: <span style=\"font-size:14px!important\"> {point.y}</span><br/>'
}
}
Thanks!!!

Just add this inside tooltips you will get it what to do.
tooltip: {
style: {
padding: 20,
fontWeight: 'bold',
fontSize: '30px',
}
},

Highcharts doesn't prevent from dataLabels overlapping. I have created simple module which prevent's from this, see simple demo: http://jsfiddle.net/menXU/1/
Use module by calling StaggerDataLabels(series);, where series is array of all series in chart object.
In the fact it's duplicate of this question, but I couldn't report this.

Hai Just add verticalAlign: 'bottom', instead of using verticalAlign: 'top', at the plotOptions.