Formatting legend and axis in Google Charts - javascript

I'm new with Google Charts and I am not able to obtain a fine result with the texts surrounding the graph.
This is how my chart looks:
As you can see, it does cut both Horizontal-Axis and Legends, so the final result is not as good as It could be. Is there a way to solve this? I've been reading the official documentation and some posts from here, but I haven't found the way to do this.
Recap: How do we modify the legend or the axis texts so they are fully visible?

After some time experimenting, I daresay it is not posible to choose how much part of the words on legend or axis you can show.
However, you can play with their sizes and position so you get -more or less- what we were looking for.
This is what can be done:
legend: {position: 'top', textStyle: {fontSize: 14}}
I've also made the image a little bit bigger so it fits the x-axis without problems (There was also the option of making its text smaller).
So doing this, this is what you get:

Its basically about setting your chart area vs width / height.
width: [yourChoice]px,
chartArea: {width: '50%'}
ref https://stackoverflow.com/a/6870732/661584
Also as #ArcDare says using the other available styling options such as font size etc

For optmized chart area,
chartArea: {'width': '90%', 'height': '60%'},
legend: { position: 'bottom' },
hAxis : { textStyle : { fontSize: 10} },
vAxis : { textStyle : { fontSize: 10} },
The trick is setting axis textStyle fontsize will enable better placement of legend on the bottom of the chart as the chart Area is about 60-70%
Feel free to use my custom Google Charts plugin which creates both chart and table.
https://github.com/cosmoarunn/gapiExt

Related

HighCharts how to make a responsive legend?

I am making a HighCharts pie chart with a responsive legend, the legend should work on mobile views as well as tablet, pc, etc.
Here is sort of a link to my issue on js fiddle https://jsfiddle.net/sg657bpz/1/
And here are the styles
legend: {
align: 'center',
layout: 'horizontal',
width: 600,
x: 100,
itemMarginTop: 1,
itemDistance: 10,
itemWidth: 170,
},
Basically right now, the legend will just kind of cut the words out of the label when we go to mobile view..
I would like the legend to dynamically shrink in size kind of like how flexbox does, depending on how large your viewport is, so that It fits within the chart and keeps the same structure of having 3 columns and two rows.
How can I add this responsive functionality? In the responsive attribute, it only lets me set one value of either min width or max width, so I cannot do CSS like media queries. Also to create this two row funcitonality, I have to set the width to different numbers, and just kind've guess that It will go on two rows, is there a way to implement this feature easier?
Thank you for the help

Highcharts move xAxis down / off of chart

I am working on legacy code from a previous developer and they used highcharts.js (v3.0.1). The xAxis is landing within the graph (screenshot) and I can't sort out why this is. I tried to recreate this in jsfiddle but I can't get that axis to move. I thought that maybe it was a bug in the version but I can't get it to replicate so I'm thinking that is has to be something within the sites own CSS that is manipulating it, however, it's built with g, rect, and text tags which I don't see in any of the custom CSS files.
I've looked through other Highchart.js posts on here but I haven't seen this issue posted yet. Does anyone know what I'm missing?
EDIT: I forgot to mention this but all the usernames are centered text-center
Check exactly how xAxis labels are aligned. As I can see they are rotated vertically so it is important to set appropriate labels align property:
xAxis: {
categories: ['Apple', 'Samsung', 'Dell', 'Lenovo'],
labels: {
align: 'left',
rotation: 90
}
}
Demo:
- labels align center: https://jsfiddle.net/wchmiel/29b4qejc/
- labels align left: https://jsfiddle.net/wchmiel/56evyrxj/
Api reference:
https://api.highcharts.com/highcharts/xAxis.labels.align
are you use the labels padding ?
https://api.highcharts.com/highcharts/xAxis.labels.padding
Be sure that the number is greater than 0.

Left-align y-axis title with labels in Highcharts

In Highcharts, I'd like to put the y-axis title at the top and have it left-aligned with the y-axis labels.
I've tried this:
$('#container').highcharts({
...
yAxis: {
...
title: {
align: 'high',
text: 'Y-axis title',
rotation: 0,
y: -10,
//To left-align title with labels
textAlign: 'left', //This is undocumented, but appears to work
margin: 0
}
}
})
However, I get an excessive left margin which seems to be proportional to the length of the y-axis title.
JsFiddle
It looks like the margin calculation doesn't take into account the textAlign: 'left' setting.
UPDATE: I should say that my current "solution" is to set a margin with chart.marginLeft but that's not ideal because it's fixed. The left margin should be just big enough to accommodate the axis labels (however big they might be).
How can I left-align the y-axis title with the labels and have a reasonable left margin?
I decided to use marginLeft (yes, you read that correctly), but based on the length of your axis label, to provide the needed flexibility.
What I did here is set your chart options to a variable called chartOptions. I then calculated the length (number of characters) of the axis title, set the marginLeft property based on that value, and then drew the chart with the amended chart options.
chartOptions.chart.marginLeft = chartOptions.yAxis.title.text.length;
var chart = $('#container').highcharts(chartOptions);
Here's the working fiddle: http://jsfiddle.net/brightmatrix/6eeuay58/9/
I tested it with different numbers by increasing some of your data points.
Please let me know if this is useful and helpful for you.

How to change the layout of google pie chart with label?

Hi I need to modify google chart. Where the labels are to be at bottom with two columns.
What i have :
What i Need:
I tried Label : {position: 'bottom', maxLines: 5}
but it says maxlines only works with position : top .
Please let me know if this is possible.
Thanks

Hiding the legend in Google Chart

I am using the Google charts API. Is there a way to hide the legend for a scatter plot?
You can disable the legend by using 'none' as the position:
legend: {position: 'none'}
A bit cleaner way is
legend: 'none'
var options = {
title: 'USA City Distribution',
legend: 'none'
};
In drawChart() function, Add legend: none property in your chart options object
In my case I use:
library: {legend:{position:'none'}}
pie_chart #type_values,library: {legend:{position:'none'}}
It doesn't appear so from the API, you can only set a position, with no option for "none". You could probably remove it with javascript though, if you can identify the containing element.
Edit: it actually appears as though you can omit the chdl= parameter to get a scatter without a legend.

Categories

Resources