-
Notifications
You must be signed in to change notification settings - Fork 11.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add possibility to change style for each of the ticks #2442
Comments
@moviesound this is a good idea. For anyone who comes across this, I'd be happy to merge a PR adding this. |
This is an example. There may be placed array in fontColor (only for XAxes). The amount of color elements must be equal to the amount of the elements in data.labels.
Then in chart.js near the row 6349 after the
|
for chart.js 2.6.0 you should do the change @moviesound suggested, but in: context.fillStyle = itemToDraw.major ? majorTickFontColor : tickFontColor; to if (Object.prototype.toString.call( tickFontColor ) === '[object Array]') {
context.fillStyle = itemToDraw.major ? majorTickFontColor[index] : tickFontColor[index];
} else {
context.fillStyle = itemToDraw.major ? majorTickFontColor : tickFontColor;
} and in line 798 change: helpers.each(itemsToDraw, function(itemToDraw) { to: helpers.each(itemsToDraw, function(itemToDraw, index) { |
@etimberg, could you provide an example on how to use 683e86e? edit: Using the following in my Chart options: yAxes: [{
ticks: {
fontColor: ['white', '#89817b', 'white', '#89817b', 'white', '#89817b', 'white', '#89817b', 'white', '#89817b', 'white', '#89817b'],
fontFamily: 'Gotham Book',
fontFunction: function (tickIndex) {
if (tickIndex % 2 !== 0) {
return '14px "Gotham Book"';
} else {
return '30px "Gotham Book"';
}
},
callback: function (value) {
return '$' + abbreviate_number(value);
}
}
}], |
@kneeki how did you build the repo? What are the commands? |
@iursevla , I use Linux, here is the process: cd ~/
git clone https://github.com/bevingtongroup/Chart.js.git
cd Chart.js
# Use apt to install npmjs if you haven't already
npm install
sudo npm install -g gulp
gulp build Once it's built, you can use the code in my previous post to achieve the same effect. |
Can someone merge this into main pls? |
Is this now a default feature? |
@crabdul it seems this is not a default feature, so for now i recommend to copy https://github.com/bevingtongroup/Chart.js or copy the code base of this main repo and modify code yourself |
oke.. i've tested the code of bevingtongroup, and it works like a charm... this really! should be pulled into this general repo |
Any chance of merging this? it's been more than a year. |
Are there any open PRs for this at the moment to make this change? If not, either somebody with the most knowledge of the issue can perhaps put one up, or I can try? |
Scriptable options for tick labels are not yet supported even in the master. |
I believe this is just for bubble, not for line (Note: scriptable options are only supported by a few bubble chart options.). Anyway, I tried to use scriptable to change the color of each element of XAxes, but it always get the last color of the array and apply that for all items. @benmccann , do you have an example? I am really blocked by that. |
Guys, a little help? Maybe is not the place to ask that, however will be helpfull to have here the complete way to use this work around (and very cleaver) solution: |
@Winnetou |
Yes, for 2.7.3. The latest code in master supports many more scriptable options. |
is this feature available in master or do I have to use @benpdavison version of chart.js? |
Does chartjs 2.8.0 support the different color axis for different ticks? |
@etimberg Can you please merge these changes to master. |
Wow 3 years no one does that. |
The best way to implement this would be to use scriptable options, which are supported thoughout the library. Right now, there's one set of options for major ticks and one set for minor ticks: Chart.js/src/core/core.scale.js Line 147 in 16bb94e
Instead, we could accept a |
I am using Vue-chartjs but strange that except for |
@QiQiBiBi the scriptable tick options are only in the dev version. It's not yet released. If you build chart.js yourself you can get access to it |
Is there any documentation on these scriptable options and this parseTickFontOptions? I am having trouble understanding how it works |
Yes, there are some docs for 3.0.0-alpha here: https://www.chartjs.org/docs/next/axes/styling/ |
I'm a bit confused. I'm trying to get font colors to work in 3.0 and I can't get them to show at all. Even using the exact code from the migration guide, nothing seems to be happening: https://jsfiddle.net/egy8qcxu/ |
I'm unclear on how that page relates to the issue. Like I said, the code in the JS fiddle is ripped straight from the migration guide, yet it doesn't change the font: https://jsfiddle.net/egy8qcxu/ but even if I try to replicate the syntax on the page provided, that doesn't seem to work either: https://jsfiddle.net/egy8qcxu/2/ Am I missing something fundamental? Do I need to include anything beyond the chart.min.js for 3.0 for fonts to work? |
The code in the migration guide has changed a bit in Here's a sample from |
Figured out the problem: It seems I was using the wrong version. Originally I just googled Chart js 3.0 and downloaded the min from github. Replaced that min with the min included in the example pages and everything seems to be working now. To anyone else having trouble, make sure you have the right version! |
Seems that the 3.0.0-alpha.2 breaks the chartjs-plugin-datalabels plugin |
Probably none of the plugins are compatible with 3.0 and will need to be updated when 3.0 final is released |
Would please share the code that worked for you. |
Using the last 3.9, if anybody still stumbles upon this topic, here is a working jsfiddle https://jsfiddle.net/keag3ptL/1/ where the X Axis Label get conditionally styled based on their label value. |
I'm chartjs 2 module for react. |
It would be great if in future there is a possibility to change style (color, bgcolor, font-weight) for each of the ticks. For example if one needs to show in XAxes that 7 May 2016 and 8 May 2016 are holidays on the linear graph - changes the style for this ticks on the XAxes. Now style is set once for all ticks.
The text was updated successfully, but these errors were encountered: