I have a chart that shows 3 datasets - 2 Line, 1 Bar.
I would like to be able to format the Y-2 axis labels in the screenshot below with HTML to allow me to show the values in each tick as bubbles to match the styling displayed on the line data points. (I am using the datalabels plugin to achieve the data point styling https://github.com/chartjs/chartjs-plugin-datalabels).
In addition to this I would like to have all labels with "XLabelLine1" and "XLabelLine2" to have a line break between them.
Is this possible? From looking at the docs it looks as if the axis labels can only be strings.
You are correct that the tick labels can only be strings and that the Chart.JS tick labels do not have HTML support. It's likely a plugin would need to be developed for this behavior. Sorry. :)
I want to add a star label to the chart's x-axis as shown in the image below. How can I do that?
I achieved this through passing Unicode(unicode for "star") with my data to google chart API.And it's working.
Thanks you all for support.
I'm trying to produce a vertically stacked bar chart using the Google Charts API and I thought I had found the solution when I found the option:
isStacked: true
However, This seems to add the stacking horizontally (see link below) and I cant seem to find a way to do it. Anyone come across this before or can help me?
See: http://jsfiddle.net/tmA55/1/
Thanks
Do you mean a vertically stacked ColumnChart?
Just change the chart from BarChart to ColumnChart:
new google.visualization.ColumnChart(document.getElementById('chart'))
http://jsfiddle.net/asgallant/tmA55/2/
Other than using the Column chart and naming appropriately is it possible to create histograms in google chart api?
To add to mattedgod's answer,
The column chart can now be created with the bars spaced tightly together, use the option:
bar: {groupWidth:"100%"};
Google introduced a couple of days ago an histogram chart : link
Google Charts does not have a histogram chart, since it is just a visualization library you will have to modify the Column Chart to suit your needs. However, I suspect the reason you are not satisfied with column chart is because of the column spacing, which doesn't look very histogram-like. So I will answer this question first:
Can you control the spacing between columns in a Column Chart?
No, not at this time. See this quote from the Google Charts Community
There's no support in the API for controlling the spacing between bars. You might be able to hack it if you're willing to dig into the chart's SVG.
So it is do-able but will take some extra work from you. You can also play around with the chartArea configuration option which will have some influence on the column spacing.
However, the original question may have a different answer actually.
Can you create a histogram-like chart using a Column Chart?
While you cannot control the spacing between sets of columns in a Column Chart, you can get the columns pressed up almost to one another by specifying them as different columns, and then setting each column's color to the same color in the configuration options.
Here is a simple 3-column histogram:
var data = google.visualization.arrayToDataTable([
['x', '1-10', '11-20', '21-30'],
['', 3, 5, 4]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"My Histogram",
width:600, height:400,
hAxis: {title: null},
colors: ['red','red','red'],
legend: {position: 'none'}
}
);
Notice you have 1 row with 3 columns that are each colored 'red'. The downside to this is that you lose out on the labels along the x-axis telling you which column represents what. Again, you will have to have some sort of logic to construct this histogram and populate the data the way you want as well.
So the long story short is Google Charts doesn't have a Histogram and while it is possible with a Column Chart, you might consider looking into a different library.
I have a chart generated from Google Charts that can be found here: Chart generate by Google Charts API. As you can see the x axis labels are being overlapped.
Anyone knows how to solve this?
See the docs under Bar Width and Spacing (chbh). There's this snippet:
a - space_between_bars and space_between_groups are given in
absolute units (or default absolute values, if not specified). Bars
will be resized so that all bars will fit in the chart.
So just add chbh=a to the options. Here's the example with this option added.