We Keep Coding

Multiple line labels for chart js

I have this radar chart in chart.js which has 5 labels. The labels are quite long so I want to show them in two lines in HTML but when I use "\n" it doesn't make a new line!
These are my labels:
labels: ["COMMUNICATION \n SKILL ", "PRODUCT AND PROCESS \n KNOWLEDGE "]
As you can see I'm trying to have "communication skill" and "product and process knowledge" both in two lines but it shows them in one line!
What's the correct way to do it?
UPDATE
The labels is in script tag:
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ["COMMUNICATION SKILL ", "PRODUCT AND PROCESS KNOWLEDGE "],
datasets: [{
label: labs,
data: dps,
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
],
borderWidth: 1
},
options: {
maintainAspectRatio: true,
scale: {
ticks:{
beginAtZero: true,
max: 4
}
}
}
});

I believe what you are looking for is answered here:
ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
The solution is to pass a nested array as an input to 'labels' - with each element in the nested array representing a new line of text in your label. So in your case the following should work:
labels: [["COMMUNICATION","SKILL"], ["PRODUCT AND PROCESS","KNOWLEDGE"]]

Just read the docs https://www.chartjs.org/docs/latest/charts/radar.html
you need your dataset to have the property data and that should be an array. The values in the array will correspond with the values in the labels by their index number.
data: {
labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
datasets: [{
data: [20, 10, 4, 2]
}]
}

How can I create a label in the bar chart?

I am working on a check website to validate some information of a users' website. I have a C3JS Chart configured with the following code:
window.onload = function () {
var debug = {{ env('APP_DEBUG') }}
console.log('Debug: ' + debug);
var chart = c3.generate({
data: {
columns: [
['alpha', 100],
['bravo', 100],
['charlie', 50],
['delta', 1],
],
colors: {
'alpha': '#3FB34F',
'bravo': '#3FB34F',
'charlie': '#E8B30C',
'delta': '#EB370F',
},
type: 'bar',
labels: true,
},
bar: {
space: 0.05
},
axis: {
rotated: true
},
});
This code results in the next chart
How can I add a label (like alpha, bravo...) in the green/orange/red bar instead of having them on the bottom of the chart?

I do not have a solution ready but I could think of two possible solutions.
You should be able to create a custom legend like described here: https://c3js.org/samples/legend_custom.html and then move these labels to the respective bars using translate/transform and D3js.
You could try to move the existing labels using D3 and translate/transform.

How do I get a different label for each bar in a bar chart in ChartJS?

I've been working with ChartJS for the last couple of weeks and I'm getting used to it, however, I'm trying to add individual labels to my bars in my barchart and I can't figure it out.
Below is the code I'm using.
var config = {
type : 'bar',
data : {
datasets : [ {
label: numberOfFailures, //This line is the problem
data : failureData,
backgroundColor : colours,
} ],
labels : labels
},
options : {
responsive : true,
legend : {
position : 'bottom'
}
}
};
If I change the word label to labels they don't show up at all, but when it says label they all show up together. What I want is for array element 1 to appear on bar 1, etc.

If your aim is to take the values from an array and have them appear along the bottom of the bar chart so that each array value is the label for a bar then you need to set the data.labels value, not the data.datasets.label value.
For example, this basic chart is taken from the Chart.js documentation for bar chart data structure and shows how to use an array of month names to label the bars. Notice that the label bars go into the data.labels node.
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
If you programmatically create an array with one label for each point of data then it might look something like this:
var chartConfig = {};
for (score = 0; score < maxScore; ++score) {
chartConfig.scoreLabels[score] = score;
chartConfig.scoreData[score] = howManyAchievedScore(score);
}
var data = {
labels: chartConfig.scoreLabels,
datasets: [
{
label: "Number of players who achieved score",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: chartConfig.scoreData,
}
]
};
You don't have to create the labels and data values inside a single object, but it's usually tidier if you can group your chart configuration data into one object so that you can pass it from one function to another with one parameter.
The data.datasets.label value does something different, providing text which appears in the chart legend and in tooltips which appear when you hover over a bar.

ChartJS - Donut charts with multiple rings

Is it possible to create a donut chart with multiple rings using ChartJS as shown below?

You can find out the solution at fiddle link
var ctx = document.getElementById("chart-area").getContext("2d");
var myDoughnut = new Chart(ctx, config);
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [
10,20,30
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C"
],
}, {
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C"
],
}],
labels: [
"Red",
"Green",
"Yellow"
]
},
options: {
responsive: true
}
};

You need to add multiple datasets into chart. they will be displayed as you need. Please look into their own sample of pie chart. You can download and open it locally as example. There they have multiple datasets, that makes chart look like you need.
Hope that it helped.

I know it was old question, but have stuck yesterday into same, so far best that i have touch is Chart js and this is a plugin who does exactly that (and even more!)

Fill colour for individual bars in Dojo Chart?

This is likely fairly simple Q (learning the ropes with Dojo).
I have successfully created a bar chart in my web app.
// Create Chart
var chartDiv = dojo.create("div");
dijit.byId("someDiv").setContent(chartDiv);
var chart1 = dojox.charting.Chart2D(chartDiv);
chart1.addPlot("default", {
type: "Bars",
gap: 3
});
chart1.addAxis("x");
chart1.addAxis("y", {
vertical: true,
labels: [{
value: 1,
text: "Field1"
}, {
value: 2,
text: "Field2"
}]
});
chart1.addSeries("MyData", [var1, var2]);
chart1.render();
I see that you can create custom themes to your charts. However, I am thinking there must be a simpler way to define a colour (ideally a subtle gradient) for each of my bars. I am also restricted to using a dojo version served up by Esri, and not sure if that allows me to then create cutom themes.
There will only ever be 5 bars (2 in the above snippet).
i.e. I want to define a different color for each bar.
Can someone put me out of my misery and provide some guidance on how to achieve this?

In hindsight, bit lazy on my side. Here is what worked for me:
chart1.addSeries("Languages", [
{ y: var1, fill: "#BD48E9" },
{ y: var2, fill: "#FA4848" },
]);

You add the following code before calling render method
chart1.addSeries("MyData", [var1, var2],
{plot: "other", stroke: {color:"red"}, fill: "lightgreen"}
);
chart1.render();