score:26
I use Chart js and datalebels to, and can do this like this:
plugins: {
datalabels: {
color: #ffffff,
formatter: function (value) {
return Math.round(value) + '%';
},
font: {
weight: 'bold',
size: 16,
}
}
}
Of course in my example i add the '%', thats why i use that function in formatter.
Remember that 'plugins' is part of 'options' in the chart.
Here is the page of the plugin datalabels with more things you can do
score:0
To change the color for each data set you can use
{
data: {
datasets: [
{
datalabels: {
labels: {
value: {
color: 'green'
}
}
}
}]
}
Found it helpful https://chartjs-plugin-datalabels.netlify.app/guide/labels.html#dataset-overrides
score:4
If you want to change font family then you can do like this:
add font-family e.g adding 'Josefin Sans' font family
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans">
and then mention family: 'Josefin Sans'
in the font JSON object. like this:-
plugins: {
datalabels: {
color: #ffffff,
formatter: function (value) {
return Math.round(value) + '%';
},
font: {
weight: 'bold',
size: 16,
family: 'Josefin Sans',
}
}
}
Source: stackoverflow.com
Related Query
- chartjs datalabels change font and color of text displaying inside pie chart
- Angular 8 & ChartJs change color in pie chart
- Is there any way to change the font color and size of labels in Chartjs 3.0.0
- Change font size and font color in Chartjs Angular 5
- ChartJS - How to add Text between Pie Chart and Legend
- Cannot change font color and box width in chart
- Change X and Y axis font color
- Change point size and color on hover in chartjs
- How to change the color of legend in chartjs and be able to add one more legend?
- ChartJS click on bar and change it's background color
- Use transparent stroke color with chartjs pie chart
- Change font family of labels in piechart and linechart in chartjs
- canvas fill text vanishes when hovering over chartjs pie chart
- Text inside Doughnut chart using Chart.js and Angular2, Ionic2
- ChartJS 2.6 - Change color of bar in Bar chart programmatically
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- Legend color not working with randomly generated background colors in chartjs pie chart
- Can't change the default color and font size of labels in react-chartjs-2
- VueJS + Chartjs - Chart only renders after code change
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- Chart js pie chart, darker shade for higher value and lighter shade for lower value. I'm displaying values monthly
- PrimeNG pie chart randomly displays, and displays on change of resolution
- Laravel - How to Display both count and percentage (%) in chartjs pie chart
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- Remove y and x axis lines and change axis font style in Chartjs
- Change Vertical Line and Color bar chart in bar chart.js
- Change the color of displayed values in pie chart
- How to add text inside the doughnut chart using Chart.js?
- Chartjs change grid line color
More Query from same tag
- Editing Chart.js legend template
- How to show the data labels without hovering the mouse on the bubbles
- graph (chartjs.org) does not stretch properly when sidebar(menu) is collapsed
- Create Conditional Chart
- Angular using PrimeNG charjs problem with font colors
- Update ChartJS line chart from DynamoDB query
- Multipe doughnut charts on one page with text in center using Chart.js
- How can I make two of my lines in Chart JS thicker
- Show Donut / Pie Chart in bootstrap modal with legends
- Chartjs tooltip location when enlarged
- Streaming Real-time data with react and chartjs-plugin-streaming paused
- angular chartjs not showing data properly
- Pause chart.js horizontal scroll
- vertical grid line not taking full hight of the canvas in chart js 3.3.2
- old yAxis ticks do not get removed (chartjs, react-chartjs-2 wrapper)
- Plot lap times with Chart.js from time strings
- Chart.js PolarArea Chart. Changing the labels to a 45 degree angle
- Prevent y-axis labels from being cut off
- ChartJS v2.6.0 unintended behaviour in Internet Explorer
- Reproduce Error in Chartjs v2 Polar chart not plotting all supplied data
- How to align Chart JS "legend" on right-center
- AmCharts: Clustered bar chart with sub-categories
- Array data not rendering in data table using this.props - ReactJS
- How to update a variable after button click
- chart js bar chart add animation to change color
- Statistics page - Load every stats <div> one by one
- Chart doesn't render in angular 2 app
- Chart.js create line graph using dates in the x-axis that reflect real time intervals (not evenly distributed)
- How to put arguments in a jchart.Chart class
- How can I change the label name when you hover your data in Chart.js?