Using the Visualization API, I am drawing a very simple ColumnChart, with no legend.
I don't know why, but the chart is not centered in its container, as if the space for the legend on the right was kept, although the legend is not displayed.
But if I change the legend position to bottom, for example, that space is still present. So I am not sure if this is related to the legend.
Please check my JSFiddle. Notice the big padding on the right (around 55px).
Any way to fix this? Thanks in advance!
The chartArea is centered in the chart (the axis labels are not considered part of the chartArea, it is easier to see that it is centered if you turn them off: http://jsfiddle.net/xyqF7/9/), what you want to do is move it off-center, which you can do via the chartArea options:
chartArea: {
width: '80%',
left: '15%'
}
http://jsfiddle.net/xyqF7/8/
Related
I'm working on a Bar Pie Chart but my values are not lining up. For example, Red data is clearly larger then blue, but blue value is higher.
The data is correct, chart.js doesnt show the area as more, it uses the angle of the circle , which normally would also divede the area normally. And as you can see the angles are correct so to fix your issue you will have to write a custom controller that draws your chart. https://www.chartjs.org/docs/latest/developers/charts.html
My labels are aligning to the left side of my bars. I'm wanting them centered but I can't figure out how to make it happen. I checked the docs but I couldn't find the answer. Anyone know how to center them?
I am new to Chart.js and I want to hide the y axis and x axis line and label in my chart. I looked at the documentation and couldn't find a good option. Has anyone else encountered this problem and have a solution?
Using the showScale option would be better
var ctx = document.getElementById("LineWithLine").getContext("2d");
new Chart(ctx).Line(data, {
showScale: false
});
Fiddle - http://jsfiddle.net/wb3kcunt/
This hides gridlines too. If you want to hide only the axes and labels and not the grid lines, just set scaleFontColor and scaleLineColor to a transparent color.
I found that if you edit a library posted in this answer, you can achieve this
In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile?
Here's a google chart I've made:
I want the legend paging gone. On page 2 there are only 2 items, and obviously these 2 items could easily fit without paging.
After spending some time researching and playing around, it seems my only options are:
Make the chart area higher - It's already too big
Make the text smaller - It's already too small
Hide the legend and make my own - This is my last resort
Does anyone know how I can modify the legend height to fit the other 2 items?
Paging is gone only when legend.position is 'top' and give legend.maxLines:
legend:{ position:'top',maxLines:4}
https://developers.google.com/chart/interactive/docs/gallery/piechart?csw=1#Configuration_Options
It looks like you have extra vertical space at the bottom of the chart that you could use to expand the chartArea into:
chartArea: {
height: '85%',
top: '13%'
}
If that is not a viable solution, your only choice is to build a custom legend, as the API does not support altering the dimensions of the legend directly.
Short version - I want to modify the width/height of a google.visualization.PieChart object after construction, but I can't find any documentation pointing out how it's done.
Context - I'm building a visualization that overlays a bunch of data on a Google Map. At certain lat/long coordinates I want to render a pie chart marker detailing certain statistics that are relevant to that place.
To avoid cluttering up the screen, I want to vary the dimensions of the pie chart markers based on the current zoom level. This requires me to either re-render all markers that are currently visible or, preferably, change the width/height attributes of all markers.
I currently use the following settings to render my charts:
legend: {position: "none"},
width: 200,
height: 200,
backgroundColor: "transparent",
pieSliceText: "none",
colors: ["#C10001", "#F79647", "#92D051", "#558ED5", "#7F7F7F"],
tooltip: {textStyle: {fontSize: 14}}
Is there a way to alter the dimensions of the chart after it's created?
I do not think there's something in the API; nevertheless with a tiny bit of Javascript you should be able to modify the attribute of the SVG tag containing the chart. One possible way is to add a viewBox attribute that will scale up or down the pie chart.
The only working solution I have so far is to redraw the entire chart with changed width/height settings. This snippet uses jQuery.
for (var i = 0; i < dataPoints.length; ++i) {
var drawingOptions = $.extend({}, defaultDrawOptions);
drawingOptions.width = defaultDrawOptions.width*(currentZoom/defaultZoom);
drawingOptions.height = defaultDrawOptions.height*(currentZoom/defaultZoom);
dataPoints[i].chart.draw(dataPoints[i].dataSource, drawingOptions);
}
As you can see, this half-baked solution is rather clumsy and might needlessly deteriorate performance.