In a Google Pie chart, I want to change the colour of the indicator in the legend to go to the next results. This is now blue, and I can't seem to change that, although I can change the colour of the pie slices (done) or even of the text (not necessary). Here is a screenshot: Google pie chart.
Here is the code:
var options1 = {
legend: 'none',
pieSliceText: 'label',
width: '85%',
height: '85%',
chartArea: {'width': '80%', 'height': '80%'},
legend: {'position': 'bottom'},
backgroundColor: {fill:'transparent'},
pieSliceBorderColor: 'transparent',
colors: ['#41ac89', '#2b9b38', '#b3b300', '#D9C022', '#bab673']
};
you can use the following options...
text: legend.pagingTextStyle
arrows: legend.scrollArrows
e.g.
legend: {
position: 'bottom',
// style paging text and arrows
pagingTextStyle: {
color: '#616161'
},
scrollArrows:{
activeColor: '#616161',
inactiveColor:'#e0e0e0'
}
},
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['', 'Views'],
['dat', 40],
['nom', 10],
['gen', 10],
['hid1', 2],
['hid2', 3]
]);
var options = {
legend: 'none',
pieSliceText: 'label',
width: 200,
height: 200,
chartArea: {'width': '80%', 'height': '80%'},
legend: {
position: 'bottom',
// style paging text and arrows
pagingTextStyle: {
color: '#616161'
},
scrollArrows:{
activeColor: '#616161',
inactiveColor:'#e0e0e0'
}
},
backgroundColor: {fill: 'transparent'},
pieSliceBorderColor: 'transparent',
colors: ['#41ac89', '#2b9b38', '#b3b300', '#D9C022', '#bab673']
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I'm using ApexCharts.js to add pie chart component on my page.
And I need to change the label size, font and position to bottom.
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill#1.2.20171210/classList.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<body>
<div id="pieChart"></div>
<script>
var options = {
series: [10, 20, 30, 50],
chart: {
height: 480,
type: 'pie',
},
labels: ["series_1", "series_2", "series_3", "series_4"],
colors: ["#ff0000", "#c758d0", "#d6d6d6", "#007ed6"],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#pieChart"), options);
chart.render();
</script>
</body>
Finally, I want my chart to look like this
Do you have any idea how to modify the code so to get the same result as it is on the picture?
I added your labels to the bottom.
You can edit the spacing by modifying:
itemMargin: {
horizontal: 5,
vertical: 0
},
Docs can be found here: https://apexcharts.com/docs/options/legend/
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill#1.2.20171210/classList.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<body>
<div id="pieChart"></div>
<script>
var options = {
series: [10, 20, 30, 50],
chart: {
height: 480,
type: 'pie',
},
labels: ["series_1", "series_2", "series_3", "series_4"],
colors: ["#ff0000", "#c758d0", "#d6d6d6", "#007ed6"],
legend: {
show: true,
showForSingleSeries: false,
showForNullSeries: true,
showForZeroSeries: true,
position: 'bottom',
horizontalAlign: 'center',
fontSize: '18px',
fontFamily: 'Helvetica, Arial',
fontWeight: 400,
itemMargin: {
horizontal: 15,
vertical: 0
},
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
}
}]
};
var chart = new ApexCharts(document.querySelector("#pieChart"), options);
chart.render();
</script>
</body>
The display of the labels are actually called "legend" and all possible options are documented on this page.
In your case, "legend" was nested too deep, it needs to be on the first level. To change the font size and font weight, you need to add the corresponding options "fontSize" and "fontWeight".
Here is a working example:
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill#1.2.20171210/classList.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<body>
<div id="pieChart"></div>
<script>
var options = {
series: [10, 20, 30, 50],
chart: {
height: 480,
type: 'pie',
},
labels: ["series_1", "series_2", "series_3", "series_4"],
legend: {
position: 'bottom',
fontSize: '24px',
fontWeight: 600,
},
colors: ["#ff0000", "#c758d0", "#d6d6d6", "#007ed6"],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
}
}]
};
var chart = new ApexCharts(document.querySelector("#pieChart"), options);
chart.render();
</script>
</body>
I have problem with google charts. I am using ColumnChart to show my data. I wan t to implement pagination on charts.
This is my chart:
I want to implement something like this:
This is my option for chart
var options = {
width: '100%',
height: '100%',
chartArea: {
width: '90%',
height: '90%',
},
bar: { groupWidth: '75%' },
backgroundColor: 'transparent',
titleTextStyle: {
color: 'white'
},
isStacked: true,
series: $scope.series,
legend: $scope.legendStyleDesktop,
hAxis: $scope.hAxis,
vAxis: $scope.vAxisPercentageRate,
showRowNumber: true,
page: 'enable',
pageSize: 2,
pagingSymbols: {
prev: 'prev',
next: 'next'
},
pagingButtonsConfiguration: 'auto'
};
var data = google.visualization.arrayToDataTable(dataToVisualize);
var chart = new google.visualization.ColumnChart(document.getElementById('top_x_div'), document.getElementById("selectParams").style.display = "none", document.getElementById("showExport").style.display = "inline");
chart.draw(data, options);
When I put to show data in table, pagination works, but in chart doesn't work.
Any idea, and thank you for help.
I am using Google Charts to visualize some data. When drawing full width chart in bordered container I can see small gaps on the left and right side. Is it possible to remove it? The chart area width is set to 100%.
JS:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2013', 1000],
['2014', 1170],
['2015', 660],
['2016', 1030]
]);
var options = {
hAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
}
},
vAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
}
},
legend: { position: 'none' },
chartArea: {
'width': '100%',
'height': '100%',
'backgroundColor': '#fff'
},
colors: ['#ddd'],
height: 50,
lineWidth: 0,
areaOpacity: 1,
annotations: {
stemColor : 'none'
},
tooltip : {
trigger: 'none'
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart'));
chart.draw(data, options);
}
HTML:
<div class="row">
<div class="col-md-3">
<div id="chart"></div>
</div>
</div>
FIDDLE: https://jsfiddle.net/5m6fLckw/5/
I am using google api line chart with annotation. How can I change the font size and font format?
<script type="text/javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', '');
data.addRows([['2010', '67', 67]]);
data.addRows([['2011', '69', 69]]);
data.addRows([['2012', '68', 68]]);
data.addRows([['2013', '67', 67]]);
var options = {
width: 350,
height: 250,
pointSize: 5,
legend: {position: 'none'},
chartArea: {
left: 0,
top: 60,
width: 300,
height: 75},
vAxis: {
baselineColor: '#fff',
gridlines: {color: '#fff'},
minValue: 64,
maxValue: 71
},
tooltip: {trigger: 'none'},
enableInteractivity: false,
annotation: {
1: {
style: 'default'
}
},
series: {0: {color: '#4D7AD3'}, 1: {color: '#4D7AD3'}}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<body>
<h2>Line Charts</h2>
<div id="chart_div"></div>
</body>
Try this
var options = {
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
color: '#871b47', // The color of the text.
auraColor: '#d799ae', // The color of the text outline.
opacity: 0.8 // The transparency of the text.
}
}
};
https://developers.google.com/chart/interactive/docs/gallery/linechart
As you can see in the following image I have many pie charts in my webpage and they do not fill completely the container (generally only an half is filled or LESS):
Here some code:
var data1 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Recapitate', sent],
['Ritornate/Bloccate', errors]
]);
options1 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#06dd00','#e12a00'],
legend: {position: 'none'},
pieSliceText: 'none',
tooltip: {textStyle: {color: '#333', fontName: 'Arial', fontSize: 16}},
chartArea:{left: 0,top: 0,width: "100%",height: "100%"},
enableInteractivity: false/*,
animation: { duration: 1000, easing: 'out' }*/
};
chart1 = new google.visualization.PieChart(document.getElementById('grafico-inviate'));
chart1.draw(data1, options1);
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', unique_opened],
['Non aperte', combined1]
]);
options2 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#3e9ca8','#ff5932'],
legend: {position: 'none'},
pieSliceText: 'none',
tooltip: {textStyle: {color: '#333', fontName: 'Arial', fontSize: 16}},
chartArea:{left: 0,top: 0,width: "100%",height: "100%"},
enableInteractivity: false/*,
animation: { duration: 1000, easing: 'out' }*/
};
chart2 = new google.visualization.PieChart(document.getElementById('grafico-aperte'));
chart2.draw(data2, options2);
The problem arises independently from the OS/Web-Browser.
I do not know if this is a bug of the visualization API or am I missing something?
SOLVED!!:
Do not ask me why but if i put the data in the following way (using the javascript Number() function) it works:
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', Number(unique_opened)],
['Non aperte', Number(combined1)]
]);
I do not know if this is your case but you can produce such semicircle in the following way. Your code little changed (only second part):
var unique_opened = 5.555; // real value: 11.11;
var combined1 = 44.445; // real value: 88.89;
var noshow = 50;
....
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', unique_opened],
['Non aperte', combined1],
['noshow', noshow]
]);
options2 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#3e9ca8','#ff5932', '#ffffff'],
...
And you get:
Idea of Javier González