How do I remove the horizontal grid lines in a Google visualization line chart? I have already tried setting
minorGridlines: {count: 0 }, gridlines: {count: 0 }
on both hAxis and vAxis.
Here is a jsfiddle of my chart.
http://jsfiddle.net/martlark/2XBhc/
Set the vAxis.gridlines.color option to "transparent" to make them disappear:
vAxis: {
gridlines: {
color: 'transparent'
}
}
This doesn't work for the charts when displayed in IE < 9 (as those versions use VML instead of SVG, and the chart's don't support transparency in VML). In this case, you will need to set the gridline color to match the background color of the chart.
Set gridlines color to none
gridlines: {
color: 'none'
}
This will also work
Tested & Working...
options = {
vAxis: {
gridlines: {
interval: 0
}
}
}
Related
I want to change the colour of the crosshair depending on the value. I am doing this, but it isn't working.
xAxis: {
type: 'datetime',
crosshair: {
threshold: 1,
negativeColor: 'green',
color: 'red',
width: 1.5,
snap: false
}
So i wanted the color of the crosshair to be green if the value of the y-axis is less than 1. But it isnt working. any help is appreciated.
The options which you have tried to set doesn't exist in the API - https://api.highcharts.com/highcharts/xAxis.crosshair.color
I think that the easiest way to achieve it is by using the className property and changing crosshair style dynamically in the tooltip.formatter callback.
Demo: https://jsfiddle.net/BlackLabel/be9jqh6s/
tooltip: {
formatter(tooltip) {
let chart = this.series.chart,
crosshair = document.getElementsByClassName('custom-crosshair');
if (crosshair[0]) {
if (this.x > 4) {
crosshair[0].style.stroke = 'green'
} else {
crosshair[0].style.stroke = '#cccccc'
}
}
return tooltip.defaultFormatter.call(this, tooltip);
}
},
API: https://api.highcharts.com/highcharts/tooltip.formatter
Referring to the kind of chart shown here:
http://code.google.com/apis/visualization/documentation/gallery/barchart.html
There doesn't seem to be a simple switch, and changing the axis color to white (on a white background) didn't seem to do anything. I even tried jquery to hide the selectors produced by the api output but no dice.
You can set hAxis.textPosition to the value of 'none'
For example:
var options = {
hAxis: { textPosition: 'none' },
};
chart.draw(data, options);
See https://developers.google.com/chart/interactive/docs/gallery/barchart#Configuration_Options
I was able to remove the label in the material version of the chart by removing the string in my datatable.
Before:
data.addColumn('string', 'Date');
After:
data.addColumn('string', '');
let options = {legend: { position: 'none' }};
Their API has no function for this indeed, but:
chart.draw( data,
{
width: 400,
height: 240,
is3D: true,
legend :'none',
axisFontSize : 0
});
Setting axisFontSize to 0 will remove your x-axis data. :)
Google changes the API so fast, this is what works today:
chart.draw(daily, {
hAxis : {textColor: '#ffffff'},
[... your other options here ...]
});
axisFontSize : 0 will remove x-axis and y-axis data
Check out http://code.google.com/apis/chart/docs/gallery/bar_charts.html#axis_label_styles
Axis Label Styles chxs "axis_or_tick"
You'll notice this documentation: "_ - (Underscore) Draw neither axis line nor tick marks. If you want to hide an axis line, use this value."
Example: 'chxs=0,,0,0,_'
Use this to remove axis from chart
hAxis: { textPosition: "none", gridlines: { count: 0 } },
vAxis: { textPosition: "none", gridlines: { count: 0 } },
baselineColor:"transparent",
Unless I'm mistake, this appears to be undocumented. Does anyone know if the far left bar colour on line charts can be changed?
It seems the first left bar is always darker than the grid lines.
you need zeroLineColor
https://www.chartjs.org/docs/2.8.0/axes/styling.html?h=zerolinecolor
options = {
scales: {
xAxes: [{
gridLines: {
zeroLineColor: '#fff'
},
}
]}}
ChartJS. Change axis line color
I have been tasked to individually style each one of highcharts' stacked barchart data labels: the ones I am referring to is the 3,2,5 in the first chart, the 4,2,3 in the second and so on. To style these all together is easy, as seen in the documentation/fiddle. How do I style them individually?
The fiddle has the code for the styling of all of them:
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
Here is the JS Fiddle as per their documentation: http://jsfiddle.net/3ak4ckuq/
Set "useHTML: true" on the datalabels. Then you can access the individual datalabel element of any point and modify the styles or add classes etc:
_.each(chart.series, function(serie) {
_.each(serie.data, function(point) {
var spanElement = point.dataLabel.div.firstChild;
spanElement.style.fontSize = _.sample(randomFontSizes);
spanElement.style.color = _.sample(randomColors);
spanElement.classList.add("custom-class");
});
});
See fiddle: http://jsfiddle.net/3ak4ckuq/6/
I want to show a long pie chart (vertical) not the default (Horizontal)
so I set dataLabels of every data , to move the position to label
but seem like a bug or something , it didn't work
or maybe have another way to do this?
I am very need to solve this issue
very thankful
here is my code:
http://jsfiddle.net/arhspt8011/Jgrdz/1
data: [
{
name:'Label1',
y:50,
dataLabels:
{
ebabled:false,
y:-200
}
},
{
name:'Label2',
y:50,
dataLabels:
{
ebabled:true,
y:-200
}
},
{
name:'Label3',
y:50,
dataLabels:
{
ebabled:true,
y:200
}
}
]
the y of dataLabels didn't work OTZ
You can increase width of chart, add spacingLeft / spacingRight, reduce chart size by "size" paramter. In case when you would like to have vertical datalabels, your can try to useHTML / formatter.