I need to display, for each quarter the label name of the serie's element data.name.
And in order to improve the user reliability I need to replace these labels by custom icons.
Here is my current Polar chart :
http://jsfiddle.net/eento/xnkabtfu/
Thanks a lot
You could use a single series and set legendType: 'point' in the series - less series gives better performance.
One way to solve your problem could be to to use Font Awesome icons. Example: http://jsfiddle.net/p48kpy0j/
To enable Font Awesome icons in exported image see a Highcharts plugin - example (source).
Another way might be to add images in dataLabels.formatter throught HTML's <img>. Example: http://jsfiddle.net/p48kpy0j/1/
Related
I'm currently using a Polar Area chart from the chart.js lib, and I'm looking to style the scale numbers via CSS.
Below are two examples:
What it currently looks like:
What I want it to look like:
I'm not sure how to access those elements and apply CSS to them.
Some help to understand that process would be much appreciated.
Thanks! 😀
Charts.js produces a bit mapped image of a chart on a canvas element. Canvas elements are not subdivided into component elements that can individually styled using CSS (which is used for styling document elements in the DOM).
Styling of chart elements is actually achieved using canvas drawing options when the element is painted. Charts.js allows you to specify these.
A quick tour of documentation suggests you can specify the appearance of legend text using legend configuration options.
Worth looing into, the HTML legend call back may provide the means of making painted legends respond to CSS styling. See this related question Custom Legend with ChartJS v2.0
I am trying to make a dynamic graph something like as below:
Y-axis gives no. of users and x axis date range(For continuous graph )
x axis gives release of an algo on that date.(For discontinued graph)
I tried combined charts of highchart this and looked in google charts library.
Is there any way by how i can either directly generate a similar chart or merge two chart types in to one? Preferably using high charts or google graphs.
I guess we can merge two highcharts in to one but I am not very sure about it, also if we can Iam not sure how to do that.
Any help is appreciated.
Thanks
I am aware that you said "Preferably using high charts or google graphs", but I want to point out that this can be done very easily in C3.js using the "types" parameter to specify the graph type for each data item.
Demo: http://c3js.org/samples/chart_combination.html
I would suggest using plot bands to indicate release dates and types. You can dynamically add them using the addPlotBand() method (see http://api.highcharts.com/highcharts#Axis.addPlotBand). They would then overlay your "run of the mill" line chart showing number of users over time.
Assuming you have data that can distinguish between the release types, you could write code that adds a plot band of the desired color at the specific points on the x-axis.
I'd suggest making the plot bands have a from and to value thin enough (say, one interval or one date's worth) so it shows up as the thin stripes in your example.
You'd need to add a manual legend to show users what those colors mean, since plot bands wouldn't automatically show up in a Highcharts legend.
I hope this helps!
I want to implement "zebra stripes" styling on the highcharts background as it will in improving readability of the graph data.
Notice the gray color between horizontal axes
http://i.imgur.com/QkOCZ2j.png
I was unable to find any such option in the highcharts website. It would be really helpful if someone had implemented it using custom javascript functions.
Check out alternateGridColor. This will specify a color for the alternating category grids.
I need a scatterplot like this: http://www.highcharts.com/demo/scatter but, instead of having one color for each serie (male and female, in the example), I need to select the color for each element. Following the example, each person would be coloured with a different level of gray, depending on their age.
As far as I know, Highcharts allow you to select the color of the elements, but it only affects the element pop-up information when you're using scatterplot.
Any other library to do scatterplots? Any way to do it with Highcharts?
Thanks!
You should be able to do this inside Hightcharts using the color property inside the data array.
You can see the documentation here, and there is also an example for this.
You could try preprocessing your data and transform it appending the color information to the array.
I've used AMCharts in a few javascript projects, they include a scatter chart and are quick and very easy to implement.
They have a free version if you are happy with their name in the corner of your chart canvas.
To set the colour of a specific point you can set the color property of a GraphDataItem - as in this documentation http://www.amcharts.com/docs/v.2/javascript_reference/graphdataitem
I have looked through the documentation and the only reference I can find is for different colour series. However I have only one data series and would like points/bars on that series different colours.
I could use multiple series and make points set to zero, which would have the same effect.
Is there a supported mechanism for having different colour bars in a bar graph using flot ?
There isn't built in support for using multiple colors in a single series.
Flot only allows specifying colors of the dots at the dataseries level, meaning each color must be its own dataseries. With this in mind, the solution is to make a single dataseries for each color.
There is a Flot plugin that allows you to set the color based on threshold values that you set. You can get the plugin code here: https://github.com/subhrajitroy/Flot-plugin/blob/master/jquery.flot.threshold.multiple.js
Flot is now shipped with a plugin that does just that.
Internally it splits a series into several series and assign a different color to each.
The plugin is in flot's github page here:
https://github.com/flot/flot/blob/master/jquery.flot.threshold.js