sliceVisibilityThreshold: .05
shows clubs all categories in pie chats below 5% under other. Is there a way to see the merged categories on hover over 'other'.
To display small values in use pie chart: sliceVisibilityThreshold: 0 in the options.
var options = {
title: 'My Daily Activities',
fontSize: 11,
backgroundColor: 'transparent',
width: "100%",
sliceVisibilityThreshold: 0,
legend: { textStyle: { fontSize: 12 } },
height: 400,
};
See in: https://jsfiddle.net/L03jf90s/2/
Related
I am working on React Google Charts to create few graphs for a project. The problem that I am facing 2 problems.
1- The Charts are re-rendering constantly in DOM. DOM constantly updating due to charts re
re-rendering
2- The tooltips are stretched on the full width of chart. Tooltip fully stretched
Here is my code for the Area Chart (Heart Rate).
import React from "react";
import { Chart } from "react-google-charts";
export const AreaChart = ({ data }) => {
const options = {
title: "Heart Rate",
hAxis: { maxValue: 500, minValue: 0, baselineColor: "transparent" },
vAxis: {
gridlines: { color: "grey", minSpacing: 10, count: 1 },
minorGridlines: { color: "grey", count: 0 },
maxValue: 120,
minValue: 0,
baselineColor: "transparent",
},
curveType: "function",
legend: { position: "none" },
chartArea: { width: "80%", height: "90%" },
areaOpacity: 0.2,
colors: ["red", "green"],
};
return (
<Chart
chartType="AreaChart"
width="100%"
height="90px"
data={data}
options={options}
/>
);
};
Note: Everything is Working perfectly on the React Google Charts' real time graphing engine with same options/settings and data.
My Chart.js pie is working fine, but when I add the legend option, it disappears, much to my dismay. Other options like title and animation work pretty well, only the legend options ruins the pie. I have looked at the code thoroughly, but can't figure out what I'm not doing right. Below is my code:
if ( $('#broadsheet_piechart_sample').length ) {
var ctx = document.getElementById("broadsheet_piechart_sample");
var data = {
datasets: [{
data: [10, 20, 30, 40, 50],
backgroundColor: ['#455C73', '#9B59B6', '#BDC3C7', '#26B99A', '#3498DB'],
}],
labels: ['Dark Gray', 'Purple', 'Gray', 'Green', 'Blue']
};
//options
var options = {
title: {
display: true,
position: "top",
text: "Test Pie Chart",
fontSize: 18,
fontColor: "#111"
},
animation: {
duration: 0
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
var broadsheet_piechart_sample = new Chart(ctx, {
data: data,
type: 'pie',
options: options
});
}
You are may using an old version which can cause this issue.
Please upgrade to the latest CharJs version (2.7.3).
Here is what I did for example : example Just exactly what you did.
Is there a way using the column chart provided by the Google charts javascript api to center columns in the middle of the chart rather than having large amounts of space between each column? I can accomplish this by grouping the values together but I lose the label under the column.
Here's a pic of what I'm trying to accomplish:
Here's what I have so far:
google.charts.load('current', { packages: ['corechart', 'bar'] })
google.charts.setOnLoadCallback(drawColColors)
function drawColColors() {
const data = google.visualization.arrayToDataTable([
['Number', 'Price'],
['1', 1900000],
['2', 1800000],
['3', 1500000]
])
const options = {
width: '100%',
height: 400,
colors: ['red'],
vAxis: { minValue: 0, format: '$###,###,###' },
enableInteractivity: false,
bar: { groupWidth: 45 },
legend: { position: 'none' }
}
const chart = new google.visualization.ColumnChart(document.getElementById('chart'))
chart.draw(data, options)
}
Codesandbox: https://codepen.io/anon/pen/GworqG
bar.groupWidth is the only config option that will specifically address column alignment
(in this manner)
however, instead of a number...
bar: {groupWidth: 45},
you can also use a percentage.
This won't necessarily move the columns, but it will make them larger, bringing them closer together.
bar: {groupWidth: '90%'},
see following working snippet for an example...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Number', 'Price'],
['1', 1900000],
['2', 1800000],
['3', 1500000]
])
var options = {
width: '100%',
height: 400,
colors: ['red'],
vAxis: {minValue: 0, format: '$###,###,###'},
enableInteractivity: false,
bar: {groupWidth: '90%'},
legend: { position: 'none' }
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart'))
chart.draw(data, options)
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
another option would be to use actual numbers (1), rather than strings ('1'), on the x-axis.
this enables additional config options you can use to push the columns closer to the center.
for instance, setting the viewWindow will allow you to add space between the visible columns and the edges.
hAxis: {
viewWindow: {
min: -2,
max: 6
}
}
by default, a continuous axis (numbers) will display grid lines,
whereas a discrete axis (strings) will not.
these can be removed, or hidden, with the following options.
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
see following working snippet for another example...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Number', 'Price'],
[1, 1900000],
[2, 1800000],
[3, 1500000]
])
var options = {
width: '100%',
height: 400,
colors: ['red'],
vAxis: {minValue: 0, format: '$###,###,###'},
enableInteractivity: false,
legend: {position: 'none'},
hAxis: {
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
ticks: data.getDistinctValues(0),
viewWindow: {
min: -2,
max: 6
}
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart'))
chart.draw(data, options)
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
I have a Google stacked bar chart that pulls data from a database and draws charts based on said data. I was able to search around and find a way to dynamically set the height based on the number of rows - but for one of my search filters, the charts look way off.
The code is below and works for 4 out of 5 of my filters, but in the 5th filter the number of rows becomes much larger (around 40-50).
Code:
var paddingHeight = 40;
var rowHeight = data.getNumberOfRows() * 50;
var chartHeight = rowHeight + paddingHeight;
var options = {
titlePosition: 'none',
width: 1400,
height: chartHeight,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '50%' },
isStacked: true,
hAxis: {
title: 'Business Hours (excluding weekends & holidays)'
},
colors: ['#0066ff', '#33cc33', '#ffcc00', '#ff0000'],
annotations: {
alwaysOutside: true,
textStyle: {
color: '#000000'
}
}
}
Produces the following results. This first image is what 4 of my 5 filters looks like.
The second image is the one in question that shows I'm clearly doing something wrong.
What is the cause of this and how can I resolve it?
Edit: I suspect my issue is one of the following:
Either my data rows are not being counted correctly as I refresh the page with the latest search parameters or I have a problem with how my divs are set up and interacting with each other. I've tried adjusting the math behind the chartHeight and removing the padding and it seems to have the same effect either way. Am I on the right track or is there something else I'm missing?
need to set options for both height and chartArea.height
here, recommend using rowHeight for chartArea.height
var paddingHeight = 40;
var rowHeight = data.getNumberOfRows() * 50;
var chartHeight = rowHeight + paddingHeight;
var options = {
titlePosition: 'none',
width: 1400,
height: chartHeight,
chartArea: {
height: rowHeight,
},
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '50%' },
isStacked: true,
hAxis: {
title: 'Business Hours (excluding weekends & holidays)'
},
colors: ['#0066ff', '#33cc33', '#ffcc00', '#ff0000'],
annotations: {
alwaysOutside: true,
textStyle: {
color: '#000000'
}
}
}
you'll want to leave some room for the legend, y-axis, etc...
chartArea has the following properties
top
left
height
width
you'll want to set top to 20 or something if legend is on top
I am using line chart via google chart api, and stuck with a problem.
When i am using arrayToDataTable everything works fine and looks okay.
https://jsfiddle.net/Ljz49gqb/
But when i am filling data object, and populate it with data needed, it's being like cut from the right side.
https://jsfiddle.net/Ljz49gqb/1/
Options in this examples, are the same
var options = {
height: 245,
width: '100%',
chartArea: {top: 15, left: 30, width: '100%', height: 190},
areaOpacity: 0.1,
tooltip: {trigger: 'both'},
legend: 'none',
pointSize: 5,
hAxis: {
format: 'MM-dd',
gridlines: {
color: '#fff',
count: 365 /* \_(ツ)_/ */
},
textStyle: {
fontSize: 11
}
},
vAxis: {
gridlines: {
color: '#dedede',
count: 5
},
viewWindow: {
min: 0
},
textStyle: {
fontSize: 11
},
baselineColor: 'dedede'
}
};
p.s. 100% width must left, because page is dynamic and used in mobile.
UPDATE
Displays bad even so
https://jsfiddle.net/Ljz49gqb/2/
UPDATE
It was not about dataTable, it was about Date type in google chart api, and 100% width. (Just to help find this topic in google)
Solved with
chartWrapWidth = document.getElementById('chart_div').offsetWidth;
options.chartArea.width = chartWrapWidth - 45;
https://jsfiddle.net/Ljz49gqb/4/