Is it possible to have the area background in the radar chart a different color than the points? Whenever I try to do both, the points get overridden.
Also, can text labels be added to the points and area?
Use an array for pointBackgroundColor, and set a single backgroundColor.
The Chart.js component comes with chartjs-plugin-datalabels installed, you should be able to use this to add labels to both the points and the area. There is currently no schema information included in the designer for the plugin, so you're on your own as far as configuration goes.
Here's a simple example:
1 Like
I have a mixed chart (one bar and two lines) and am trying to add data labels to just the bar chart, but I get a component error when setting datalabels to true.
Great! I originally had 'pointbackgroundcolor' instead of 'pointBackgroundColor' that did the trick plus adding pointRadius to the dataset section and not options>elements>point.
1 Like
I had the same issue. You have to add an object or value under the datalabels. See above where he fixed mine.
Eventually it loaded and the error went away, but it shows labels for all three charts as well as showing x and y values instead of just y. There is no + icon next to datalabels.
Right-click is your friend!
Ok last question on the radar chart I believe. Trying to increase font size but the font size property seems to have no effect. The font weight did change but size is doing nothing...
Here's an example of a mixed chart with datalabels enabled for the bar chart, and disabled for the line chart.
I would highly recommend reading this section of the Chart.js manual, which discusses how options are resolved from top to bottom.
EDIT: Also, there is a datalabels.display option you can use to control the visibility; use this instead of labels.title.
The radar chart uses a radial axis, it has it's own set of properties: Radial Axes | Chart.js
There's definitely room for improvement with the property schema here too.
1 Like
Ah, my example had a category axis, but your chart has a linear axis.
You will need to add a custom formatter.
data.datasets[0].data.datalabels {
...
formatter: (value, context) => return value.y
...
}
formatter is a scriptable option, so you have a lot of flexibility here.
EDIT: Also, there is a datalabels.display option you can use to control the visibility; use this instead of labels.title.
Ok at least I know the right place now. Unfortunately, I think something is overwriting the chart font values, maybe the container it is in?
Can you give some more information about what you’re expecting to see vs what is happening?
Trying to change the font color to white on the doughnut data labels (39 and 61 in the screenshot). Tried adding color, fontColor, etc. to dataset 0.
Since those labels are provided by the datalabels plugin, you'll have to set the color there.
// For all datasets
options.plugins.datalabels.color: #FFFFFF
// For a single dataset
data.datasets[index].datalabels.color: #FFFFFF
This same pattern holds for basically all properties; you can define something "higher up" the tree it and let it cascade down, or define it for a specific dataset.
1 Like
I went back and retried, and these settings worked for what I was trying to accomplish, thank you!
1 Like