Develop Reference

Number of legends per page on pagination in Highcharts

Hi I am using Highcharts. In one of the chart I have too many legends so there is an overflow. In this scenario Highcharts is rightly adding pagination arrow as shown in attached pic. My question is how can I control number of legends per page. I need only 4 legends per page when pagination occurs. I could not find anything in highcharts doc. Please help. [

There is no API option to set the number of series showing at the legend.navigation but you can control it using legend properties, such as itemWidth, maxHeight and other options for styling legend. You can also use responsive.rules for more precise settings.
Example config:
legend: {
align: 'center',
itemMarginTop: 1,
useHTML: true
},
responsive: {
rules: [{
condition: {
maxWidth: 500,
},
chartOptions: {
legend: {
width: 250,
itemWidth: 125,
maxHeight: 60
},
}
}
]
},
Demo:
https://jsfiddle.net/BlackLabel/j6gn1uto/
API Reference:
https://api.highcharts.com/highcharts/legend
https://api.highcharts.com/highcharts/responsive.rules

Custom color map google GeoChart Google Developers

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

Google Charts Custom Font Not Rendering Correctly - Firefox

We're using Google Charts to create some visualizations on our website. Our site uses a "custom" font called "Gotham A". The font loads and works fine on the website, body text and all else render just fine and dandy.
For our charts, our X Axis, Y Axis and Titles all use the Gotham A font as well. In IE and Chrome the charts\title render the font just fine, but FireFox doesn't know how to render it properly.
Below are examples on how they're rendering and the script we have in place to load our charts. Are there any settings, etc. that I can alter that would help to get these fonts to render properly in FireFox?
Here's a screenshot of the charts in Chrome:
And here's a cap of the same stuff in FireFox:
Take a look at "Contract Sales - Past 12 Months", in the Firefox version some of the letters like the lower r, lower s, and the numbers 1 and 2 aren't rendering accurately. Neither are any of the characters in the axes.
Here's how we're setting the fonts and stuff for the charts:
function LoadChart(responseData, chartTitle, xType, xTitle, yType, yTitle, chartDOMObjSelector, chartTitleWidth) {
var chartFont = 'Gotham A';
// Set chart options
var options = {
'title': chartTitle,
'width': chartTitleWidth,
'titleTextStyle': { color: '#606060', fontName: chartFont, fontSize: '14', bold: false, italic: false },
'hAxis': { textStyle: { color: '#24597f', fontName: chartFont, fontSize: '10', bold: false, italic: false } },
'vAxis': { textStyle: { color: '#24597f', fontName: chartFont, fontSize: '10', bold: false, italic: false } },
'legend': { position: 'none' } // set Legend Position to None to hide it
};
var data = new google.visualization.DataTable();
//logic to add row data...
var chart = new google.visualization.ColumnChart($('#mychart'));
chart.draw(data, options);
}

not sure if this will help,
but you could make sure all the elements have the correct font-family
when the 'ready' event fires...
var chart = new google.visualization.ColumnChart($('#mychart')[0]);
google.visualization.events.addListener(chart, 'ready', function () {
$('text').attr('font-family', chartFont);
});
chart.draw(data, options);

Had the same problem. It's related to a font having a space in the name. I was using Bauhaus 93 and it wasn't working. But when I changed it to include single quotes in the name, 'Bauhaus 93' then it started working for me.

Google Charts backgroundColor not working with example code

I use code from example page to create horizontal bars chart:
Option backgroundColor work for other chart types, like this and that.
Is there are way to change background color for Bars charts?
google.load('visualization', '1.1', {packages:['bar']});
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
backgroundColor: { fill: '#000' },//this is not working
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" },
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="top_x_div"></div>
chart

You're using a Material Bar chart (See the relevant documentation here.)
See the comment at the end of the documentation paragraph :
The Material Charts are in beta. The appearance and interactivity are
largely final, but the way options are declared is not. If you are
converting a Classic Bar Chart to a Material Bar Chart, you'll want to
replace this line:
chart.draw(data, options);
...with this:
chart.draw(data, google.charts.Bar.convertOptions(options));
So if you want your standard options taken into account you need to wrap them with google.charts.Bar.convertOptions().
Have a try, it works great. See a jsfiddle of it here.

Google visualization combo chart aggregate tooltip

I have a sample google visualization combo chart in this fiddle where the chart is draws as given below:
var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
chart.draw(data, {
title : 'Yearly Coffee Production by Country',
width: 600,
height: 400,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
isStacked: true,
});
The above chart contain normal tooltip. But I am trying to format the tooltip as follows,
when museovering on first stack and so on. What is the procedure to achieve it?