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",
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
I'm trying to draw a straight dashed line across my linear chart at zero.
I got it to work by drawing another series with all the points on the y axis at 0 and it works ok but I would like to change the style to 'Dash' and also remove the annoying series name it adds to the legend by default. I don't want it to appear in the legend. I tried setting name to '' for this part.
var zeroSerie = {
data: firstSeries,
dashstyle: 'Dash'
};
zeroSeries.name = '';
soarChart.addSeries(zeroSerie, false)
I would also very much like to set the colour to red and 'stroke-width': 2,
Thanks for any help
I think that is better to use the plotLines option:
yAxis: {
plotLines: [{
value: 0,
color: 'red',
zIndex: 2,
dashStyle: 'dash'
}]
}
Live demo: http://jsfiddle.net/BlackLabel/zan69hm7/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines
Problem: if you enable the tooltips in google geocharts you cannot change the tooltip title, it's the first column you pass to the google chart draw method.
Instead of the CSS above to hide the title, you can set the showTitle option for the tooltip to false
tooltip: {
isHtml: true,
showTitle: false
}
Then you can use HTML markup in your tooltip to display the tooltip exactly the way you want.
In google geocharts if you enable the tooltip visualization, the title will be the first column of the data you passed to the google geochart.draw function.
In my case for performance consideration I found better to pass to google the ISO3166 nation 2 character code, it's resolved immediately, if you use the extended name it's not recognized immediately and it left some grey areas for some seconds.
Unfortunately after this choice, the tooltip title shows the 2 letter nation iso code, but I need to show another title.
I created a json array built this way:
var arCustomersDataByNation = [['Country', 'MyNumericData','Tooltip'],['RU',4,'My beautiful tooltip'],['AE',3,'NewTooltipTitle3'],['AF',1,'NewTooltipTitle4']...];
Added the data to a google dataTable :
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'MyNumericData');
data.addColumn({type:'string', role:'tooltip'});
for(var i = 1; i < arCustomersDataByNation.length; i++){
data.addRows([[arCustomersDataByNation[i][0],arCustomersDataByNation[i][1],arCustomersDataByNation[i][2]]]);
}
and defined the google chart options, the "isHtml: true" option is fundamental, is the only way to hack via CSS the geochart tooltip:
var arSubCColors = ['#ffffff','#99E6FF','#70DBFF','#1FC7FF','#00B4F1'];
var zoom_0_options = {
backgroundColor: {fill:'#f2f2f2',stroke:'#FFFFFF' ,strokeWidth:0 },
colorAxis: {minValue:0,maxValue:4,colors: arSubCColors},
datalessRegionColor: '#ccc',
displayMode: 'regions',
enableRegionInteractivity: 'true',
keepAspectRatio: true,
legend: 'none',
region:'world',
resolution: 'countries',
sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10},
tooltip : {textStyle: {color: '#666'}, showColorCode: true, isHtml: true}
};
Afyter this some CSS, the ".google-visualization-tooltip-item:first-child" rule hides the bold default title:
.google-visualization-tooltip{
border: 0px!important;
height : 30px!important;
list-style: none!important;
}
.google-visualization-tooltip-item
{
list-style: none!important;
position: relative;
top: -3px;
color: #707173!important;
font-weight: bold!important;
}
.google-visualization-tooltip-item-list .google-visualization-tooltip-item:first-child
{
display: none;
}
And here is the result:
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
}
}
}
I'm trying to make it possible for my users to add a max plotLine to a chart and have it change the background color of the chart if a plot goes above that line. I can't seem to get a method to update the plotlines. I've tried:
chart.yAxis[0].update({
plotLines: [{
id: 'limit-max',
color: 'blue',
dashStyle: 'LongDashDot',
width: 1,
value: 45000,
zIndex: 0
}]
});
but I get the error:
TypeError: a is undefined
...dBands,function(a){a.render()});n(this.series,function(a){a.isDirty=!0})},setCat...
highcharts.js (line 136)
You can only destroy and create new plotLins, because update() function is not available.
just add this code and then you can use the plotline.update method
//Add support for update method
Highcharts.PlotLineOrBand.prototype.update = function (newOptions){
var plotBand = this;
Highcharts.extend(plotBand.options, newOptions);
if (plotBand.svgElem) {
plotBand.svgElem.destroy();
plotBand.svgElem = undefined;
plotBand.render();
}
}
Here's what worked for me http://jsfiddle.net/tx1kt0bj/2/
var plotBand = tempAxis.plotLinesAndBands[0];
$.extend(plotBand.options, {
color: '#000',
to: 10,
from: 2
});
plotBand.svgElem.destroy();
plotBand.svgElem = undefined;
plotBand.render();
I tried to assign an id to plotLine,
First remove the plotline completely by removePlotLine(id), then added it back by addPlotLine. It works great for me.
function upgradePlotLine(new_line) {
chart.yAxis[0].removePlotLine('my_line');
chart.yAxis[0].addPlotLine(new_line);
}