Develop Reference

Display tooltip on mouseover in the Highchart Stack Column Total

I was looking at this highchart stacked column - Highchart Demo
and I'm wondering if it's possible to have a tooltip when you mouse over the total stacked label.
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold'
}
}
I wanted to achieve something like this - See Image here.
Note: I wanted to have a tooltip on mouseover the Total Stacked Label not on the column series.

You can use a custom-events plugin which allows to cache events on stackLabels.

Google Candlestick Chart setting line width not working

I'm using google charts (in GWT with gwt-charts library) and I'm trying to change the line width of a candlestick chart to 1 but it is not working
I'm using ComboChart with series of type Candlestick and I've tried setting lineWidth to 1 for "options" and "series" object, with no luck.
Is it possible that lineWidth has no effect on candlestick types ?
Code:
ComboChart chart = new ComboChart();
ComboChartOptions options = ComboChartOptions.create();
Legend legend = Legend.create();
legend.setPosition(LegendPosition.NONE);
options.setLegend(legend);
ComboChartSeries series = ComboChartSeries.create();
series.setType(SeriesType.CANDLESTICK);
series.setLineWidth(1);
options.setSeries(series);
options.setLineWidth(1);
// draw on data update
...
chart.draw(dataTable, options);

Unfortunatelly, candlestick.risingColor.strokeWidth and candlestick.falingColor.strokeWidth only affect the candle body. There is an enhancement request to customize shadows and wicks on https://github.com/google/google-visualization-issues/issues/1014 but the priority is low. If more users star this issue, Google team may speed up the solution.

cursor styling in for flot pie chart

I was using flot pie chart(http://www.flotcharts.org/flot/examples/series-pie/index.html) example and succesfully drew the pie charts. While styling the pie chart, I was able to find the options for pie like colors and opacity and al. but I wanted to change the cursor styling on pie and I found that in the offcial flot page itself it is using ordinary cursor wehn we hover over pie slices. Instead i wanted to change it to cursor pointer styling.. when we give the creating canvas that property it will show pointer cursor for the whole canvas.. so if the canvas is big, it will be pointer cursor even if we hover outside pie graph. Ive also tried to giv the proeprty while at the time of creation,
$.plot($("#canvas_" + key.split(" ").join("_")), pieChartData[key], {
series: {
pie: {
show: true,
radius: 1,
innerRadius: 0.3,
cursor : 'pointer',
stroke: {
color: '#ffffff',
width: 2.0
}
},
}
});
This will not work.. is there any solution for this issue?

Take a look at the 'hoverable' option, described under Customizing the Grid
in the docs and demonstrated in the pie example.
Leave the cursor at default to begin with, then change it to the pointer when you receive a hover event over a pie slice. When you receive a hover event with no attached slice, set the cursor back to default.

You could just target the pie chart and change the CSS class in your stylesheet:
.flot-overlay { cursor: pointer; }
It's not the most graceful way, but it will work!

Formatting legend and axis in Google Charts

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

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.