Customize label color

[imtrobin]

Hi, I can't seem to find a way to customize label etc. Eg in PieChart I changed FontColor, and it works well but the Labels are not changed. I thought they should follow the change or is there another way to customize them.

[Joelius300]

Please use the issue templates. We need to be able to reproduce the issue and see the expected vs the actual behaviour, otherwise we can't help you. Also, Chart.js has some great resources out there like their docs and their samples where you can try to find the answer to your question. The property names etc. should be the same except for the casing so you don't need to know JavaScript to answer your question.

I'm closing this because we cannot help you the way it's written currently. Please expand your issue and provide a detailed explanation with what you want to achieve AFTER you've tried to solve it yourself. Show what you've found while trying to solve it yourself. When you've rewritten the original issue, you can reopen it.

[SeppPenner]

@imtrobin I guess, you're searching for this: https://www.chartjs.org/docs/latest/axes/labelling.html. You can e.g. set fontColor or fontFamily for the labels as described there. Should work with the library as well as far as I know.

[imtrobin]

Thanks Sepp, I can't see that in C#, I have to go javascript to set that? When I set title "Age", it changes but the labels are not

@Joelius300 , I'm a new user to chartjs, you are making it like Stackoverflow.

[Joelius300]

You're right that I'm making it a bit like SO, at least for the inital post. The inital post/question/issue should contain everything you know. You didn't post code, you didn't post screenshots, you didn't explain the issue in detail and you didn't use our template. Are we supposed to guess everything you don't give us? It's probably going to take longer to understand and reproduce your issue than it would for you to just google it if you knew what you were after.
That being said, we're not Chart.js support. I do realize that this library has grown to a point where we need to take some responsibility and explain in detail how to do things but our resources are very limited. As long as we don't have an elaborate Wiki, you're best off trying to figure out how to do it with Chart.js resources. If you don't know how to apply that to C#, we're absolutely going to help you but then you have code you can show us and we don't have to ask many questions to even understand the issue.

Sorry but I do not have time to chase after those details that you should've included in the inital post so I decided to close the issue.

Now, I still don't quite understand what you want the labels to change to. When you set the title, it shouldn't affect the labels. Do you maybe want to set the FontColor for the Legend instead of the Title?

[imtrobin]

I thought the question is pretty clear for someone who is familiar with codebase, which I'm not, it's only a day I looking at the library. If it's not clear, you can highlight it to me to make it clearer I understand this is a community effort, if you don't feel like answering, you could have left it open for another helpful member to point me in the right direction. Closing it is just SO like (ironically sounds like a**hole like), doesn't really help build a community.

Yes, the Legend is what it is. It works for piechart but now, for bar chart, is this the way to change the font?

BarChartConfig.Options.Scales.XAxes.ForEach (x => x.ScaleLabel.FontColor = FontColor);

It's terribly not obvious way to change font,and it doesn't work cos it throws null exception. Is the library or am I doing it wrong? I can't step through to debug, (Don't worry, I'm not expecting you to reply, I will open another issue if I can't figure it out in the next hour)

[Joelius300]

I'm sorry you're hurt by my response. I hope you understand that I'm not getting paid for maintaining this library nor are any of the other members of this community.

I don't want to get into this too much but it doesn't help to know the codebase when you don't clearly state what you want to achieve. Also, it's simply a sign of respect to put some effort into an issue/post when you expect people to help you for free. At least use the template that we prepared for you so that you have a helpful guideline to writing an understandable issue.

[Joelius300]

Now that we've spoken about that, if you want us to help you, please post the code you already have and write a detailed explanation of what you would like to happen. You can also attach a screenshot to help explain what's currently displayed and what you want to see instead (the one you posted above doesn't have an explanation to it so I don't quite understand what you mean).

By the way, why can't you step through with the debugger?

And to more specifically go about your answer:

Yes, the Legend is what it is. It works for piechart but now, for bar chart, is this the way to change the font?

I simply can't tell in that situation. If this is the only little snipped you show me, unfortunately, I have no way of reproducing your issue. I would need to see the definition of your axes. That's why you should always include the code you have.

[Joelius300]

Here's a BarConfig which yields legend labels with a red font. I can only assume that this is what you're after.

new BarConfig
{
    Options = new BarOptions
    {
        Legend = new Legend
        {
            Labels = new LegendLabels
            {
                FontColor = ColorUtil.ColorString(255, 0, 0)
            }
        }
    }
}

I'm sorry for the drama, I'll handle it better next time.

[imtrobin]

I don't why but visual studio is not stopping at the breakpoint ,and throwing

It's not the Legend, I got that figured out, it's the text on Axes Scale. The only way I see the is ForEach loop but its crashing.

The time I spent trying to find out how to customize font, I used less time to setup amchart with jsinterop, customized colors.

I know its an open source library, but some things are made looking more difficult than it needs to be. Of cos , the blazor debugger is not helping.

[Joelius300]

I'll take a crack at this again but unfortunately I'm still not sure how to help you.

@SeppPenner already had a good idea which unfortunately won't work because doughnut/pie charts don't seem to have a scale configuration.
In the last few comments you talked about axis labels but there's no mention of that in the title or the initial issue so I didn't pick up on that. Also, the pie chart's axis is special because, well, there is none, so you can't customize it's labels.

We're using Chart.js and do not control it's features. What you show in that screenshot looks like something you can only achieve with the datalabel plugin (see #40).
Since you managed to get it to work using jsinterop with amchart, I have no doubts that you'll manage to setup that datalabel plugin using jsinterop as well. Why don't you try it and show us the results? :)

If that's not it I have a few ideas how you could help us to fix this:

• Post the exact exception you get when trying that ForEach solution
• Post your chart-config and setup-code
• Read and search through their docs and their samples and try to find what you want in your application, then post that here

Just in general, show everything you try. Not only does it help us to understand the issue, it also helps you to get an overview of what's happening and potentially solves the problem for users that face the same issue in the future :)

[SeppPenner]

@SeppPenner already had a good idea which unfortunately won't work because doughnut/pie charts don't seem to have a scale configuration.

Haha, I didn't see that, sorry 😕

[Joelius300]

Any updates on this? Have you managed to get it working or maybe found an alternative? 😃

[Joelius300]

Closing this due to inactivity. Please respond if this issue should be reopened.