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.
Related
Chart.js 2.0 line chart
I need to only show the hover state on the current point, not on the entire data set.
Chart.js documentation has this example,
This is what my chart looks like when I hover on a single point.
Thank you.
Found the answer. When creating the chart you can specify it in the options.
options: {
hover: {
mode: 'single'
}
}
https://developers.google.com/chart/interactive/docs/gallery/calendar
Is there a way to remove the legend (top right gradient that shows min and max values) from a Google Calendar chart?
just set the legend parameter to none
legend: 'none';
from https://developers.google.com/chart/interactive/docs/gallery/geochart
An object with members to configure various aspects of the legend, or 'none', if no legend should appear.
I am working on Highstock, I am trying to set a color to a specific point in "data" in Highstock, like in the example, its using Highchart API,but I couldn't get it to work with Highstock API, no matter how I set the color, it doesn't show on the graph.
Can someone please help?
Here is what I have tried so far
Highstock has point markers disabled by default, you will need to enable them explicitly as follows,
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
API Reference: http://api.highcharts.com/highstock#point.marker.enabled
Example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/series-marker/
jsFiddle for your code: http://jsfiddle.net/jugal/nrRDg/
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
Is there any way to change the UI or design of the google chart. I want my chart to look like
http://www.flickr.com/photos/41695354#N08/6020984362/in/photostream/
First you need to load the right chart API. For line charts,
<script> google.load("visualization", "1", {packages:["corechart"]}); </script>
Then set the graph options like this
chart.draw(data, {width: X, height: Y, title: <graph Title>, pointSize:4, legend:bottom,
hAxis: {title: <x-axis title>, titleTextStyle: {color: 'red'}},
vAxis: {title: <Y-axis title>, titleTextStyle: {color: 'red'}}
});
You can vary the value for pointSize to either increase or decrease the value points on the graph. If you don't want the points to show on the graph, delete the pointSize option.
Google automatically assigns colors to the different data sets you have. It may be possible to choose specific colors
To change the color of a data series, line chart, etc, use the following code :
var options = {
title: 'My Chart',
series: {0:{color:'F38921',lineWidth:2}}
};
If you're wanting to change the colors, check out this color picker that lets your preview different themes on google visualization charts/graphs
http://www.philipwhitt.com/projects/google-visualization-theme-picker
Select the color list you want then put them in the colors options like so:
var chartOptions = {
title: 'Some Title',
colors: ['#657CD0','#DA68A0','#06C3C0','#777B80','#7C6D70','#7C0850','#F75870']
};
From your image link given, your desired customizations can be done via Google Chart API options (e.g. setting legend at bottom, setting columns/series colours)
If you want to configure the look and feel of a Dashboard, you can (i) adapt the Google Chart CSS Themes at http://battlehorse.github.com/google-charts-controls-gallery/#google-visualization-controls-theme-plus which would customize the chart itself (ii) consult ThemeForest Google Chart Themes such as http://themeforest.net/item/dream-works-responsive-admin-template/full_screen_preview/1988987?ref=gundoel007 , but most of them only configure the look and feel outside the actual chart.