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.
Related
I have bar charts with value on top using chartjs-plugin-labels, and some values bumping to each other as image shown below on highlighted values
How do I add background color to the values or is there any other nice solutions?
you can see my code here, please click Show Files and then choose bar-chart.html
https://replit.com/#panjigemilang/html?v=1
you can user plugin option of chart js as per below code.
plugins: {
datalabels: {
color: "#000",
backgroundColor: "#f0f0f0",
font: {
weight: "bold",
size: 12
},
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start"
},
}
}
https://www.npmjs.com/package/chartjs-plugin-datalabels => You can use this plugin
https://www.npmjs.com/package/chartjs-plugin-labels => This is very old plugin
I have this google chart timeline (using react-google-charts).
<Chart
chartType="Timeline"
data={data}
width="100%"
options={{
allowHtml: true
bar: { groupWidth: 10 },
}}
/>
I tried adding bar: { groupWidth: 10 } and its working on the normal bar chart but not on the timeline.
Try for example this jsfiddle here: https://jsfiddle.net/c5hyknfr/2/
Doesnt work for the timeline. Any other way to do that?
EDIT: Added a bounty, in case someone knows also any workaround with CSS and/or using classes. Hacky solutions approved.
You can increase the font size for the bar's labels. This will also increase the bar's height. You need to add the barLabelStyle.fontSize-property in the options-object:
var options = {
timeline: {
groupByRowLabel: true,
showRowLabels: true,
rowLabelStyle: {
fontName: 'Helvetica',
fontSize: 9,
color: '#000000'
},
barLabelStyle: {
fontSize: 30
}
},
'width': 1100,
'height': 2200,
'chartArea': {
width: '80%', // make sure this is the same for the chart and control so the axes align right
height: '80%'
},
'backgroundColor': '#ffd',
'view': {
'columns': [0, 1, 4, 5]
}
};
Then you could adjust your CSS to decrease the font-size again, but your bars will remain bigger. Please note that the labels of the bars aren't correctly centered anymore. That's why you need to transform the position, so the labels are centered again:
rect + text {
font-size: 12px;
transform: translate(0, -5px);
}
With the values from the example it will look like this:
I would like to customize the labels in chart.js, but don't seem to find the right way. Where do I need to put the styling options? What goes around it?
Is there a way to remove the Grid lines all together?
options: {
scale: {
gridLines: {
display: false
},
scaleLabel: {
fontColor: 'green',
fontSize: '24px',
fontFamily: "Montserrat"
},
ticks: {
maxTicksLimit: 1,
display: false,
},
}
},
I would expect the font color to change to green and get bigger, but it does not effect the font at all.
The same goes for the GridLines. I would expect that both vertical and horizontal lines would be removed, but the vertical Lines stay unaffected.
enter image description here
The radar chart uses a Linear Radial Axis. That documentation details all of the customization you have available for your chart axis.
Font
To configure your font as you have it above, you would want to have those settings on your options under the pointLabels property:
options: {
scale: {
pointLabels: {
fontColor: 'green',
fontSize: 24,
fontFamily: "Montserrat"
}
}
}
As a note, the fontSize property is supposed to be a number, not a string.
Angle Lines
There are two different settings for the axis lines (gridLines and angleLines). The angleLines are the lines that radiate out from the center of the chart and what you are wanting to additionally hide. To hide the angleLines, you would want to do the following:
options: {
scale: {
angleLines: {
display: false
}
}
}
Problem: The chart legend covers top of the chart.
What I have done: I read the docs for chart js but cannot find a property to lift the legend up over the chart itself. Also, changing the size of the chart (canvas) does not work as it changes the whole thing altogether.
Semi-solutions: I understand there is an option to put the legend in the bottom and left and right, but I would like to keep it on top.
Any ideas how to change it, please?
var myChart = new Chart(ctx, {
type: "line",
data: chartData,
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: "some data",
fontColor: "#999",
fontStyle: "300",
fontSize: 12,
fontFamily: '"Poppins", sans-serif'
},
legend: {
padding: 20
},
tooltips: {
mode: "index",
intersect: true
}
}
});
Edit: It is a known bug that appeared in version 2.7 and till now March 2017 has not got a solution. One thing to help it is to use not 10th increments in data. (The bug is something to do with rounding)
var data = google.visualization.arrayToDataTable(stats_data);
var options = {
width: 1400,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
bars: 'vertical',
colors:['#999','#346ac9', '#279423', '#fc9826'],
};
var chart = new google.charts.Bar(document.getElementById('chart-recent'));
chart.draw(data, google.charts.Bar.convertOptions(options));
I've got a stacked bar chart and I want each of the colors to be different (grey, blue, green, orange). However, the colors of the sections just take the first color (grey) in multiple brightnesses.
I also tried this in my options:
series: [
{color: '#999'},
{color: '#346ac9'},
{color: '#279423'},
{color: '#fc9826'}
]
How do I get each of the series to have a different color?
At the time of the original question, the Material Bar Chart probably did not yet support custom colors for stacked bar charts.
Today, the series configuration option as an array of color objects seems to work fine. See the colors variable in the example below.
Example code:
const data = [
['Sector', 'High', 'Medium', 'Low' ],
['Agriculture', 18, 9, 29],
['Education', 2, 14, 10],
['Healthcare', 4, 6, 41],
['Manufacturing', 36, 10, 3]
];
const colors = [
{ color: 'indianred' }, //high
{ color: 'khaki' }, //medium
{ color: 'seagreen' }, //low
];
const drawChart = () => {
const options = {
chart: { title: 'Risk by sector' },
legend: { position: 'top' }, //not yet supported
bars: 'horizontal',
stacked: true,
series: colors
};
const chartData = google.visualization.arrayToDataTable(data);
const elem = $('figure#health-chart')[0];
const chart = new google.charts.Bar(elem);
chart.draw(chartData, options);
};
google.charts.load('current', { packages: ['bar'] });
google.charts.setOnLoadCallback(drawChart);
Resulting chart:
Fiddle with the code:
https://jsfiddle.net/p8bnfe2h
Configuration options
series
An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used.
Documentation:
https://developers.google.com/chart/interactive/docs/gallery/barchart#configuration-options
I was able to get the colors working here
When generating the graph I had to use: new google.visualization.ColumnChart(...) instead of new google.charts.Bar(...) otherwise it would not stack properly.
You may also want to make sure you are using the latest version of Google Charts. In the fiddle above, I used samples from the developer docs which were using: https://www.google.com/jsapi to autoload all the things.