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 - Solid Gauge - Inconsistent Styling and Improper Values

I have a website which makes use of HighCharts Solid Gauge .
There are two rows of gauges.
The first row of gauges is built as follows.
var workgroups =['WG01','WG02','WG04',
'WG05','WG06','All'];
$(function ()
{
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: 'Gauge',
pane: {
// Positioning
center: ['50%', '60%'],
// img size
size: '100%',
// full circle/half circle
startAngle: -90,
endAngle: 90,
// gauge coloring
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#000',
// Inner semi circle sizing
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
// Set the limits for coloring
[0.1, '#55BF3B'], // green
[0.4, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
// Outside Line buffer
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
// Title Location
y: -30
},
labels: {
style:{
color: "#000000",
fontSize: "13px"
},
// Bottom Label Offset
y: 15,
distance: -10,
}
},
plotOptions: {
solidgauge: {
dataLabels: {
style:{
color: "000000",
fontSize: "15px"
},
borderWidth: 0,
useHTML: true
}
}
}
};
// The gauges
for( i in workgroups){
if(workgroups[i] == 'All'){
header = "All";
gaugeOptions.yAxis['stops'] = [[.5, '#000000']]
}else{
header = "WG" + workgroups[i].slice(-2);
}
$('#'+workgroups[i]).highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
style:{
color: "#000000",
fontWeight: 'bold',
fontSize: '22px'
},
text: header
}
},
credits: {
enabled: false
},
series: [{
name: workgroups[i],
data: [0],
dataLabels: {
y: 40,
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">clients</span></div>'
},
}]
}));
}
}
);
and results in the following image.
This is fine, proper values, all styles fit where they are supposed to.
After doing these gauges, we then do a second row of gauges.
The (Current) Configuration for these gauges are:
var application_array = new Array(3);
application_array['Sapphire'] = 50;
application_array['Magic Bullet'] = 35;
application_array['Boris'] = 30;
$(function ()
{
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: 'Gauge',
pane: {
// Positioning
center: ['50%', '85%'],
// img size
size: '150%',
// full circle/half circle
startAngle: -90,
endAngle: 90,
// gauge coloring
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#000',
// Inner semi circle sizing
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
// Set the limits for coloring
[0.1, '#55BF3B'], // green
[0.4, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
// Outside Line buffer
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
// Title Location
y: -30
},
labels:{
y:13
}
},
};
// Build the gauges here
var license_gauges = document.getElementsByClassName('gaugeCell2');
var myLength = license_gauges.length;
for (i=0; i <myLength; i++){
var header = license_gauges[i].id;
var selector = "[id='"+header+"']";
if (header == 'Boris'){
var max_value = 30;
}else if (header == 'Magic Bullet'){
var max_value = 35;
}else if (header == 'Sapphire'){
var max_value = 50;
}
console.log(header)
$(selector).highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: max_value,
title: {
style:{
color: "#000000",
fontWeight: 'bold',
fontSize: '22px'
},
text: header
}
},
credits: {
enabled: false
},
series: [{
name: header,
data: [0],
}]
}));
}
});
Which Produces the following BAD Gauges
My Question
1) In the second row of gauges, Why is it printing 25 as max for the 2nd and 3rd gauge?
- I have tried an associate array to hold the proper value, same issue occurs
I have tried a function which returns a static value, same issue occurs
I have tried logic in the gauge creation itself, same issue occurs
I have tried writing a static value as max, and all gauges get the proper value
2) In the second row of gauges, why is it that the max Value, for the second and third gauges is inconsistently formatted with the first gauge?
I have tried virtually every layout configuration I can think of, but yet it stays the same issue.
When Using a static max value, this issue does not occur.
Do I need to make an individual gaugeoption for each gauge since they have different max values? I would like to use 1 gauge style for the top row and 1 gauge style for the bottom row (fatter).
A JSFiddle has been created here. There is most likely extraneous code (especially css), as I wanted to get it up and running quickly.
http://jsfiddle.net/v341z7tk/1/
Thanks for reading

Why is it printing 25 as max for the 2nd and 3rd gauge?
It isn't. That is, the max isn't 25, but the drawn axis label shows the value 25, as there is an axis tick at this value. The max value is not showing with a label.
why is it that the max Value, for the second and third gauges is inconsistently formatted with the first gauge?
The position is inconsistent because the 25 label is in varying positions depending on what the max value is. In your case it is 35 and 30 for the last two gauges.
Do I need to make an individual gaugeoption for each gauge since they have different max values?
No. From my understanding you want a label at the start (0) and end (max_value). To get this you need to ensure that the axis ticks (which have associated labels) are at these positions, and only these.
A simple way is this (JSFiddle):
yAxis: {
min: 0,
max: max_value,
tickPositions: [0, max_value], // Ensure position of ticks, which have labels
// ...
}

I was having the same issue, but following what Halvor Strang said solved my problem like so
displayOptions.yAxis.min = widget.display.minimum;
displayOptions.yAxis.max = widget.display.maximum;
displayOptions.yAxis.tickPositions = [widget.display.minimum, widget.display.maximum];
distorted labels
- Minimum and maximum out of place

Google chart api, same options, different data array make bug

I am using line chart via google chart api, and stuck with a problem.
When i am using arrayToDataTable everything works fine and looks okay.
https://jsfiddle.net/Ljz49gqb/
But when i am filling data object, and populate it with data needed, it's being like cut from the right side.
https://jsfiddle.net/Ljz49gqb/1/
Options in this examples, are the same
var options = {
height: 245,
width: '100%',
chartArea: {top: 15, left: 30, width: '100%', height: 190},
areaOpacity: 0.1,
tooltip: {trigger: 'both'},
legend: 'none',
pointSize: 5,
hAxis: {
format: 'MM-dd',
gridlines: {
color: '#fff',
count: 365 /* \_(ツ)_/ */
},
textStyle: {
fontSize: 11
}
},
vAxis: {
gridlines: {
color: '#dedede',
count: 5
},
viewWindow: {
min: 0
},
textStyle: {
fontSize: 11
},
baselineColor: 'dedede'
}
};
p.s. 100% width must left, because page is dynamic and used in mobile.
UPDATE
Displays bad even so
https://jsfiddle.net/Ljz49gqb/2/
UPDATE
It was not about dataTable, it was about Date type in google chart api, and 100% width. (Just to help find this topic in google)

Solved with
chartWrapWidth = document.getElementById('chart_div').offsetWidth;
options.chartArea.width = chartWrapWidth - 45;
https://jsfiddle.net/Ljz49gqb/4/

HighCharts, multiple charts on page call via function

Hopefully someone can help me as I'm stuck at the moment after searching for a solution already for the last 2 days.
I decided to look into HighCharts yesterday for a new project and it does do what I'm after. However I'm trying to make the implementation option into my WordPress plugin as clean as possible and that's where I'm stuck at the moment.
This JSFiddle is working and shows what I like to get as output: http://jsfiddle.net/golabs/tpKU3/
But I would like to be able to create a new chart by just calling a function and supply the target div ID and the 2 dataArray's. My attempt can be found here: http://jsfiddle.net/golabs/rstpA/
or see the jscode here:
/**
* However this second section of code does NOT work as nothing is displayed in the container21 div...
* What am I doing wrong here?
* I like to be able to create a new chart by only supplying the target div ID and the dataArray's, this
* to have be able to manage the general settings centrally.
*
* This JSFIDDLE is related to: http://jsfiddle.net/golabs/tpKU3/
**/
$(function () {
var __catergories__ = ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'];
var getChartConfig = function( renderId, dataArray1, dataArray2 ) {
var config = {};
config.chart = {
renderTo: renderId, polar: true, type: 'line', height: 254, width: 360, className: 'SpiderPolarChart', backgroundColor: 'rgba(101,101,101,.1)'
};
config.title = {
text: ''
};
config.legend = {
layout: 'horizontal', align: 'center', verticalAlign: 'bottom', y: -3,
};
config.credits = {
enabled: true, text: 'highcharts.com', href: 'http://highcharts.com/', position: {
verticalAlign: 'bottom',
x: -11,
}
};
config.pane = {
startAngle: -90, endAngle: 90, center: ['50%', '93%'], size: 300, background: null
};
config.xAxis = {
categories: __catergories__,
tickmarkPlacement: 'on', tickPixelInterval: 1, lineWidth: 0, labels: {
rotation: 'auto',
distance: 12
}, showLastLabel: true
};
config.yAxis = {
gridLineInterpolation: 'circle', gridLineDashStyle: 'LongDash', tickInterval: 1, lineWidth: 0, min: 0, max: 5, ceiling: 5, labels: {
x: 4, y: 15
}, showLastLabel: true
};
config.exporting = {
enabled: false
};
config.tooltip = {
shared: true, pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
};
config.series = [{
name: 'Overall Rating', data: dataArray1, color: '#D4A539', type: 'area', pointPlacement: 'on', connectEnds: false, index: 1, legendIndex: 2
},{
name: 'Personal Rating', data: dataArray2, color: '#333', type: 'line', pointPlacement: 'on', connectEnds: false, index: 2, legendIndex: 1
}];
return config;
};
// ===========================================================================
charts.push(new Highcharts.Chart(
getChartConfig( "container21", [1.5,3,2,3,4,1,2], [1,4,1.5,3,2,3,1] )
));
});
I've run the code through JSHint.com so all typos should be tackled as it doesn't show any errors at the moment.
I hope someone can guide me into the right direction to get this to work.
Cheers!
** Updated the links to the JSFiddles **
** ISSUE RESOLVED, see below **

In this jsFiddle (http://jsfiddle.net/golabs/rstpA/) you are not telling it what chart is. You are trying to set the options for a chart that you have not created to update the options you are passing. It is sort of backwards.
Here is a quick "fix":
var newChart = new Highcharts.Chart(
getChartConfig( "container21", [1.5,3,2,3,4,1,2], [1,4,1.5,3,2,3,1] )
);
Now, I would think it would be better to setup a global option set and then merge in your new set (specific to chart you want to build) as in my linked SO answer. This may or may not give you more flexibility.

charts was not defined.
Is this the solution you are looking for?
var charts = [];
charts.push(new Highcharts.Chart(
getChartConfig( "container21", [1.5,3,2,3,4,1,2], [1,4,1.5,3,2,3,1] )
));
http://jsfiddle.net/37Gsv/1/

you may try this:
var charts = [];
var i=0;
for (i =1; i< 10; i++){
var o =i.toString();
charts.push(new Highcharts.Chart(
getChartConfig( "container2"+o, [1.5,3,2,3,4,1,2], [1,4,1.5,3,2,3,1] )
));
}
test link: http://jsfiddle.net/newpiseth/8u0tkkkL/5/