Multicolor Text on Chart

Chart.js Text color

scaleFontColor is used to change the color of the labels.

Instead of putting it in your datasets you should add it as a parameter in your function, like this:

window.myLine = new Chart(ctx).Line(lineChartData, {
    responsive: true, scaleFontColor: "#FFFFFF" }
});

Chart.JS change Text Color

This is in 3.3.2. Answer based on one provided by Juergen Fink in this thread stackoverflow.com/questions/37292423/chart-js-label-color

new Chart(document.getElementById("myChart"), {
    type: 'bar',
    data: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [2478,5267,734,784,433]
        }
      ]
    },
    options: {
      plugins: { 
      legend: {
        labels: {
          color: "white", 
          font: {
            size: 18
          }
        }
      }
    },
      title: {
        display: true,
        text: 'Predicted world population (millions) in 2050',
      },
  scales: {
      y: {  
        ticks: {
          color: "white",
          font: {
            size: 15, 
          },
          stepSize: 1,
          beginAtZero: true
        }
      },
      x: { 
        ticks: {
          color: "white", 
          font: {
            size: 14 
          },
          stepSize: 1,
          beginAtZero: true
        }
      }
    }
  }
});

canvas {
  background: grey;
}

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>

multicolor text on chart

How about this code written by Jim Lemon?

concat.text<-function(x,y,txt,col) {
    thisx<-x
    for(txtstr in 1:length(txt)) {
        text(thisx,y,txt[txtstr],col=col[txtstr],adj=0)
        thisx<-thisx+strwidth(txt[txtstr])
    }
}
plot(0,xlim=c(0,1),ylim=c(0,1),type="n")
ctext<-c("Roses are ","red, ","violets are ","purple")
concat.text(0,0.5,ctext,col=c("black","red","black","purple")) 

How to change the color of the text in the Chart.js chart

Changing the label colour is literally the first example in the plugin documentation.

Here's a snippet showing changing the colour for all datasets in a chart:

new Chart(document.getElementById("chart"), {  type: "pie",  data: {    labels: ['a', 'b', 'c', 'd'],    datasets: [{      data: [1, 2, 4, 8]    }]  },  options: {    maintainAspectRatio: false,    plugins: {      datalabels: {        color: 'red'      }    }  }});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script><script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script><canvas id="chart"></canvas>

How to change color of text when added column in google chart

use the following option to change the text color for the legend

legend: {
  textStyle: {
    color: textChartColor 
  }
} 

Color specific added text in plotly bar chart

With the textfont argument you can adapt font, size and color of the bar labels.

For example here I changed the color to red:

library(plotly)
Country<-c("EU","CHE","ITA")
Value<-c(3,2,1)

dat<-data.frame(Country,Value)

fig1 <- plot_ly(dat, 
                x = ~Value, 
                y = ~Country,
                type = 'bar', 
                orientation = 'h',
                hovertemplate = paste('%{y}', 
                                      '<br>Uptake first dose (%): %{x}<br><extra></extra>'), 
                text = paste(Value, '%'), 
                textposition = 'outside',
                #change color
                textfont = list(color = "red"),
                marker = list(color = '#63bb47')
) 
fig1 <- fig1 %>% layout(
  font = list(color = '#a2a2a2'),font = list(color = '#a2a2a2'),
  yaxis = list(fixedrange = TRUE,title="",
               showgrid = FALSE, showline = FALSE, showticklabels = TRUE, domain= c(0, 0.85)),
  xaxis = list(fixedrange = TRUE,title="",zeroline = FALSE, showline = FALSE, showticklabels = FALSE, showgrid = FALSE)) 

fig1

Plot

How to Change Text Color in ApexCharts Label?

The following CSS worked for me:

.apexcharts-tooltip span {
    color: #ffffff;
}

Someone earlier had suggested a similar answer but had omitted the span selector. Without span, it doesn't work for me.

---

Related Topics