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: ''
}
}
]
}

How to set Google Chart height based on number of rows?

I have a Google stacked bar chart that pulls data from a database and draws charts based on said data. I was able to search around and find a way to dynamically set the height based on the number of rows - but for one of my search filters, the charts look way off.
The code is below and works for 4 out of 5 of my filters, but in the 5th filter the number of rows becomes much larger (around 40-50).
Code:
var paddingHeight = 40;
var rowHeight = data.getNumberOfRows() * 50;
var chartHeight = rowHeight + paddingHeight;
var options = {
titlePosition: 'none',
width: 1400,
height: chartHeight,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '50%' },
isStacked: true,
hAxis: {
title: 'Business Hours (excluding weekends & holidays)'
},
colors: ['#0066ff', '#33cc33', '#ffcc00', '#ff0000'],
annotations: {
alwaysOutside: true,
textStyle: {
color: '#000000'
}
}
}
Produces the following results. This first image is what 4 of my 5 filters looks like.
The second image is the one in question that shows I'm clearly doing something wrong.
What is the cause of this and how can I resolve it?
Edit: I suspect my issue is one of the following:
Either my data rows are not being counted correctly as I refresh the page with the latest search parameters or I have a problem with how my divs are set up and interacting with each other. I've tried adjusting the math behind the chartHeight and removing the padding and it seems to have the same effect either way. Am I on the right track or is there something else I'm missing?

need to set options for both height and chartArea.height
here, recommend using rowHeight for chartArea.height
var paddingHeight = 40;
var rowHeight = data.getNumberOfRows() * 50;
var chartHeight = rowHeight + paddingHeight;
var options = {
titlePosition: 'none',
width: 1400,
height: chartHeight,
chartArea: {
height: rowHeight,
},
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '50%' },
isStacked: true,
hAxis: {
title: 'Business Hours (excluding weekends & holidays)'
},
colors: ['#0066ff', '#33cc33', '#ffcc00', '#ff0000'],
annotations: {
alwaysOutside: true,
textStyle: {
color: '#000000'
}
}
}
you'll want to leave some room for the legend, y-axis, etc...
chartArea has the following properties
top
left
height
width
you'll want to set top to 20 or something if legend is on top

See clubbed categories in other in google pie chart

sliceVisibilityThreshold: .05
shows clubs all categories in pie chats below 5% under other. Is there a way to see the merged categories on hover over 'other'.

To display small values in use pie chart: sliceVisibilityThreshold: 0 in the options.
var options = {
title: 'My Daily Activities',
fontSize: 11,
backgroundColor: 'transparent',
width: "100%",
sliceVisibilityThreshold: 0,
legend: { textStyle: { fontSize: 12 } },
height: 400,
};
See in: https://jsfiddle.net/L03jf90s/2/

Put 2 line charts to one Google Chart

I am trying to put 2 graphics with different scale to one Google Chart:
var options = {
curveType: 'function',
legend: { position: 'bottom' },
vAxis: {
0: {
gridlines: { count: 10 },
viewWindow:{
max:250,
min:0
}
},
1: {
gridlines: { count: 10 },
viewWindow:{
max:20000,
min:0
}
},
},
series:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:1}
},
'chartArea': {'width': '90%', 'height': '75%'}
};
But I received this result:
All the data is positive numbers for both charts. Why I received -100 on the left side? What is wrong?
Thanks!

The solution is quite simple:
hAxis and vAxis contain the options of the horizontal and vertical axes, respectively. And if you want multiple vertical axes, you have to use vAxes (not vAxis)!!!

How to set the background color in a LineChart (Google visualization) in Android?

Ok, this sounds like a stupid question. And probably is... sorry if so, but I could not find the answer.
I have a LineChart, and want to set it with black semi transparent background. The WHOLE thing, not just the frame around the chart: I don't want to see any frame.
In Chrome and Firefox this looks great. However, in Android it looks awful, with the chart WHITE (?) and the background black, and I cannot changed it! I've played for a long time with backgroundColor, backgroundColor.fill, colors, CSS, without success. I even tried with both:
google.load('visualization', '1', {packages: ['corechart']});
and
google.load('visualization', '1.1', {packages: ['corechart']});
Is this an Android webview bug or what??
This is my code. First, the CSS of the div containing the chart, and then the LineChart options:
CSS:
#elevation_chart {
position: absolute;
padding: 0px;
bottom: 3px;
left: 3px;
visibility: hidden;
opacity: 0.5;
}
Javascript:
var option = {
legend: 'none',
height: 100,
width: 200,
curveType:'function',
lineWidth: 2,
colors: ["#FFFF00"],
chartArea: {left: 35, width: 160, height: 90 },
vAxis: {
gridlines: {color: '#FFF', count: 8},
baselineColor: 'black',
textStyle: { color: '#FFF', bold: true },
},
backgroundColor: '#000',
intervals: { 'style':'line' }, // Use line intervals.
focusTarget: 'category',
tooltip: { trigger: 'none' },
}
Thanks!
L.

You want to set the backgroundColor to transparent:
http://jsfiddle.net/63Phz/