Style a specific X-axis label with ChartJS - chart.js

I see in the ChartJS docs (https://www.chartjs.org/docs/latest/) how to style the x-axis as a whole, but I'd like to style a single label.
I have an example codepen here https://codepen.io/jsilver951/pen/pozOBzy?editors=1000 where I've tried to add the attribute in before the update function but nothing is working.
Incorrect
lineChart.options.scales.xAxes[0].ticks.fontColor = "hsl(0,100%,50%)";
Does anyone know how or even if this is possible?

This issue of changing the style of each tick was raised here https://github.com/chartjs/Chart.js/issues/2442.
A working solution was created by #bevingtongroup1 with an example of how to use it by #kneeki here2.
The issue is now closed but I'm not sure if its fully implemented into the latest chart.js version. Hope this helps solve your issue!

Related

Is there any way to get Chiselled Effect in chart js?

enter image description here
is there any attribute or any way to get this effect on chartjs
The ChartJS plugin section can be found here:
https://www.npmjs.com/search?q=chartjs-chart-
The one you are after is probably this:
https://www.npmjs.com/package/chartjs-plugin-style
Examples are here:
https://nagix.github.io/chartjs-plugin-style/

How to use images in GTK Stack Switcher

I'm writing an application using C++ and gtkmm. I made a Gtk stack in it. Now I want to add images instead of text on stackswitcher's buttons. I assume that it's possible because something like this is made in gtk3-demo:
Unfortunatelly the example is made using UI file and I want to do it without UI designer. For now I found this answer:
But it's not very helpful to me. The answer was to use stack.child_set_property but I checked gtkmm documentation for stack and there isn't anything like this for C++. The closest match was Gtk::Stack::child_property_name with adnotation that it returns A ChildPropertyProxy that allows you to get or set the value of the property, or receive notification when the value of the property changes. I suppose this may be the thing i'm looking for, but due to lack of examples I have no idea how to use it.
To sum up: Is anyone able to tell me how to set an image as StackSwitcher's label?
Ok, it seems I've found an answer. I'll post it if anyone needs it in the future:
To change Stack Switcher's text label into image I just needed to do that:
stack->child_property_icon_name(ChildName) = "Icon Name";

ChartJS: add a clickable text in title

I am using ChartJS to draw a line chart. I want to update the chart with the different dataset but that is another case. Right now i am having trouble in adding a button in the title because no callback function is available for this. Any thing from i can get help ?
According to this issue on github.
There are two points mentioned:
1- You cannot have a hyperlink inside the canvas.
2- There is a solution to make title clickable but this makes whole one point to another point clickable not only text but the white space also.
My solution : what I did was to use a simple hack; I hide the title by giving it display :false and then add an external link to it. Line adding a link into the div. And upon clicking it I was changing the chart.
You can control the chart by using any external element but there are some limitation on manipulating the chart from the elements of the charts itself.
I hope it may help the future readers.

Bar chart with values placed on the chart instead of in tooltip

i'm trying to create some charts with google charts api. I need a bar chart with values placed directly on the chart (not on the tooltip which is set by default). I know that it was possible in Image Charts (which are now deprecated). Is there any way to achive a similar result in Google Charts? I will be grateful for any help or advice...
Here are some examples of what i want to achieve:
No, there isn't. See the answer in this question.
Quote follows:
This feature is not currently supported. The only way to implement it is to write some fancy javascript to create it.
I am no pro at working with SVG with javascript, and won't pretend to be. I'll let you know what I found out with Firebug, and share that.
Using this chart I inspected the SVG element that's created. It has 5 different <g> (I'm assuming group) elements.
g[1] contains information on the title.
g[2] contains the legend
g[3] contains the chart information (sub-groups with the chart
area, gridlines, series, axis label values, etc.) -- when a point is
selected, this shows the circle/double-circle for that point too
g[4] contains axis titles
g[5] contains the tooltips in two separate groups, but only on
mouseover
Here is the function in the code that gets triggered when you mouseover a point:
Y.Ov=function(a,b,c){a=new kv(a);var d=this.Mf.pk(Wj);b=b[zc](sd);d[w](this.Mf[sb](b[0]));for(var e=1;e<b[L];++e)d[w](this.Mf.pk(ti)),d[w](this.Mf[sb](b[e]));Qt(d,c);a.t()[w](d);a.Zz(100);a.Yz(100);this.on[y](a);return a};Y.appendChild=function(a,b){if(b){var c;if(b[Bc]==Sv){if(!b.Th())return;c=b.t()}else c=b;a.t()[w](c)}};Y.replaceChild=function(a,b,c){a.t().replaceChild(b,c);Cu(c)};Y.Fg=function(a){a.Th()&&this.xs(a.t())};Y.xs=function(a){this.Mf.Fg(a)};Y.ds=function(a){this.Mf.removeNode(a);Cu(a)};
This probably doesn't help you. I can't find any easy way to create a workaround for this (oh-so-needed) feature. Sorry there's no solution yet!

a Cufon problem on a nested menu

I'm building a nested navigation bar, here is the jsFiddle:
http://jsfiddle.net/3Y8vB/1/
the nested menus are on the third item, "Collezioni": so far so good. But adding Cufon triggers a strange problem: "hovering" the nested menus and going away from them all the way down, the "Collezioni" link disappears!
http://jsfiddle.net/3Y8vB/2/
Well, it doesn't really disappear: it retains the #fff color (:hover) instead of going back to #111 (normal state), and since the background is white too, it "disappears". Going all the way UP (without "hovering" the nested menus) has no problem.
I'm sure it's a Cufon related problem since the first version (without Cufon) is working nice.
Please, can you help to solve this? Thanks in advance
Ok, found the solution here:
https://github.com/sorccu/cufon/wiki/FAQ#wiki-faq-10
And here's the new jsFiddle:
http://jsfiddle.net/3Y8vB/3/