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
- Show multiple data in a single data in chart.js
- Chartkick column_chart different colors not working
- How do you limit the blur in a linear gradient on a canvas?
- ChartJS 2 lines each with different fill gradients
- dynamic data in ChartJS
- charts.js chart showing old data on hover
- chart.js pie chart - how to update dataset with smooth transition
- How do I prevent the scale labels from being cut off in chartjs?
- Chart.js is it possible to style the labels?
- Chart.js How to align two X-axis in bar chart?
- Using chartjs to limit data?
- Chartjs background color multiple Dataset
- Chart.js chart doesn't render when using Angular 2
- chart.js pie chart background colors: is there any way to generate them randomly?
- Pie Chart using chart.js not showing up but bar charts are?
- Chart js scatter - display label on hover
- Chart.js - How to set animation speed?
- Equal distance grouped bar chart irrespective of scale - chart.js
- How to display a progress over time in one horizontally stacked bar with chartjs
- Multiple bar widths in Chart.js bar chart
- ChartJS v2.6 update breaks custom line-with-area-range (stripe) chart
- chartjs with local dates
- Load data into chartjs using promises in vue.js
- reactive chart with chart.js in meteor
- Bar chart labels in Chart.JS
- how to add FAHRENHEIT symbol in chart js donut chart
- Labeling and Data (ChartJS)
- chartjs-plugin-zoom: get currently visible values when the page first loads
- Line chart with large number of labels on X axis
- how to filter dataset from labels using ChartJS