I need the color of the clicked region to change color. Thank you!
I tried to use the documentation settings but I did not succeed ..
https://developers.google.com/chart/interactive/docs/gallery/geochart#configuration-options
var options = {
region: 'BR',
resolution: 'provinces',
datalessRegionColor: 'white',
defaultColor: '#ebebeb',
enableRegionInteractivity: true,
displayMode: 'regions',
height: 480,
};
Looks like the only way to do this is to create dynamic content on your map.
https://developers.google.com/maps/documentation/javascript/examples/layer-data-dynamic
Related
I want to change the map in the datamaps to a svg image. so that I can change it to different map as needed at a later stage. Is it possible to do that or do I need to change the code in the datamap to change the map to a different map ? or is there way I can hide some of the country in the world map ?
I have been able to solve the issue using the dataURL and get the desired results
this.worldMap = new Datamap({
element: this.worldMapElementRef.nativeElement,
responsive: true,
scope: 'world',
aspectRatio: 0.60,
fills: {
defaultFill: '#22496e',
'color-type-1': '#ffdd00'
},
geographyConfig: {
dataUrl: '../../../../assets/world.topo.json',
popupOnHover: true,
highlightOnHover: false,
borderWidth:1,
borderOpacity: 1,
borderColor: '#22496e',
}
});
How do I change the size of the symbols in the legend? Right now they look like this:
I would like them to be squares approximately the same size as the titles. After looking at the docs, I thought changing symbolHeight, symbolRadius and symbolWidth would do the trick, but it doesn't. In fact these parameters don't change anything at all, as far as I can see.
No working demo provided using official spline-plot-bands demo
You can use css to achieve the requirement
.highcharts-legend-item path{
stroke-width:10
}
fiddle demo
If you are using line series, you need change its legend symbol to column series legend symbol. Then you can use symbolHeight, symbolWidth and symbolRadius properties.
API Reference:
http://api.highcharts.com/highcharts/legend.symbolHeight
http://api.highcharts.com/highcharts/legend.symbolWidth
http://api.highcharts.com/highcharts/legend.symbolRadius
Example:
http://jsfiddle.net/x2vk088m/
Just use symbolHeight, symbolWidth in your config...
Something like this:
////////
legend: {
align: 'left',
rtl: false,
verticalAlign: 'top',
useHTML: true,
itemStyle: {
'cursor': 'default',
'font-weight': 'normal'
},
symbolWidth: 10, <<<<<//HERE
symbolHeight: 2, <<<<<//HERE
symbolRadius: 0, //creating square legend,
labelFormatter: function() {
return this.name;
}
},
/////
I'm using highcarts to add a label to the centre of my pie chart. I'm using the labels config options but I want to add a label to the beginning of it as such:
I've tried multiple things, including the labelFormatter but nothing seem to work. Currently my code stands as:
labels: {
items: [{
useHTML: true, // Using HTML for label
//html: "Transactions",
html: '<img src="https://github.com/tobi-ajala/shell-exercise/blob/master/icons/card.png?raw=true"/>' + "Transactions", // Doesn't work!
style: {
fontFamily: 'Arial,Roboto,Helvetica,sans-serif',
fontWeight: 'bold',
fontSize: 14,
verticalAlign: 'middle',
top: 140,
left: 460
}
}]
},
Please see the JS Fiddle here: http://jsfiddle.net/tobitobetoby/1fqvzpdn/22/
labels.items doesn't seem to support images.
You can use renderer to create the label with the exact inner HTML that you pass as an argument. Notice that useHTML option (7th argument) is enabled. Then you can style it via CSS.
this.renderer.label("<div class='transactions'>
<img src='https://github.com/tobi-ajala/shell-exercise/blob/master/icons/card.png?raw=true'/>
Transactions</div>", 120, 125, null, null, null, true).add();
Demo: http://jsfiddle.net/kkulig/p4nnxjq1/
API reference: http://api.highcharts.com/highcharts/Renderer.label
I've been trying to find an answer to this, but I have had no such luck. I was wondering if it is at all possible to add some customization to a legend of a Chart with google scripts? If so could maybe you guys point me in the right direction of how to accomplish this? thanks in advance.
here are the options that I have set so far.
options = {'title':'Production',
'width':1366,
'height':768,
'vAxis': {'format': '$#,##0.00;($#,##0.00)',
'title': 'Money'},
'hAxis': {'title': 'Month'}
};
Sincerely,
Sicariuxs
Here is an example of how you can use to customize the legend of the chart with Google Charts:
var options = {
//sliceVisibilityThreshold: 0.01,
chartArea:{left:10,top:0,width:'100%',height:'100%'},
height: 300,
legend: { position: 'right', textStyle: {fontSize: 7}},
pieSliceText: 'none',
colors:['#03A9F4','#0091EA']
};
How to remove hover tooltip from Google Visualization pie chart (core chart)? Need to make it work cross-browser, eg, IE, FF, Chrome, Safari, Opera
Edit: I need the slices to be be clickable too.
enableInteractivity : false removes the hovers but doens't throw 'select' or other interaction-based events.
Maybe you need to add this to your chart's options
'tooltip' : {
trigger: 'none'
}
In this way you can leave enableInteractivity set to true.
Use the enableInteractivity = False option. It will disable interaction and hover.
chart.draw(data, {
width: 400,
height: 240,
title: 'Your chart and data',
enableInteractivity: false,
hAxis: {title: 'Year'}
});
set tooltip: { isHtml: true } in option section.
chart.draw(data, {
tooltip: { isHtml: true },
width: 400,
height: 240,
title: 'Title',
hAxis: {title: 'Year'}
});
in css file
div.google-visualization-tooltip { display:none }
This remove hover event but maintains the click event:
tooltip: { trigger: 'selection' }