We Keep Coding

Legend isnt moving to the right on my doughnut chart created with chart.js

For some reason, the legend on this doughnut chart created with chart.js is not moving to the right. Even tried adding the rule to chart creation itself instead of putting it in the variable
EDIT
With further inspection, it appears any options that are set to the legend do not appear to be working.
const mobileData = {
labels: ["Desktop", "Tablet", "Phons"],
datasets: [{
label: '# of Users',
data: [2000, 550, 500],
borderWidth: 0,
backgroundColor: [
'#7477BF',
'#78CF82',
'#51B6C8'
]
}]
};
const mobileOptions = {
legend: {
position: 'right',
labels: {
boxwidth: 20,
fontStyle: 'bold'
}
}
}
let mobileChart = new Chart(mobileCanvas, {
type: 'doughnut',
data: mobileData,
options: mobileOptions
});
Here's a fiddle to the project minus images.
https://jsfiddle.net/5j2ucpv6/3/

You are using the new V3 version of the lib instead of V2
So please read the migration guide from chart.js (https://www.chartjs.org/docs/latest/getting-started/v3-migration.html)
The legend options have been moved to the plugin section like this
options: {
plugins: {
legend: {
position: 'right'
}
}
}

Can't draw pie chart using chartjs - TypeError: Cannot create property '_meta' on number '16'

I'm facing problem in generating pie chart with single data(sometimes I need to generate a pie chart with just single data).
The data count is less than hundred. My array contains only single property and count is 16 that means
pieChartUniqueLabelsArray = ['YourName']
pieChartUniqueCountsArray = [16]
I'm receiving the following error.
TypeError: Cannot create property '_meta' on number '16'
How can I draw this pie chart using chartjs. Help will be very appreciated.
Here is my code:
myPieChart = new Chart(ctx, {
type: "pie",
data: {
labels: pieChartUniqueLabelsArray,
datasets: pieChartUniqueCountsArray,
},
options: {
maintainAspectRatio: false,
legend: {
display: false,
},
plugins: {
labels: [{
render: "label",
position: "outside",
fontSize: 18,
},
{
render: "value",
fontSize: 15,
position: "border",
},
]
},
tooltips: {
titleFontSize: chartMouseOverFontSize,
bodyFontSize: chartMouseOverFontSize
},
},
});

Your datasets structure is incorrect. Data structure.
var pieChartUniqueCountsArray = [
{
data: [16]
}
];

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 to add text in bar graph not middle in graph

We are using chartist js to make graph chart, but i can not find any solution to how to add text after bar grid.
Please see the below image to clear the pitcher:-
Jquery setting :-
new Chartist.Bar('#ct-campaignsBy', {
labels: ['Campaigns 1', 'Campaigns 2', 'Campaigns 3' ],
series: [
[5, 4, 3 ]
]
}, {
seriesBarDistance: 10,
reverseData: false,
horizontalBars: true,
axisY: {
offset: 80
}
});

chart.js mixed chart types

I have this example from chart.js docs:
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Item 1', 'Item 2', 'Item 3'],
datasets: [
{
type: 'bar',
label: 'Bar Component',
data: [10, 20, 30],
},
{
type: 'line',
label: 'Line Component',
data: [30, 20, 10],
}
]
}
});
It works fine. However, my intention is to change the type dynamically.
I am aware that there is getDatasetMeta() method, that you can apply to your chart instance, and if I output the result it returns to the console I get something like this:
{
bar: true,
controller: ChartElement,
data: Array[...],
dataset: null,
hidden: false,
type: 'bar',
...
}
I can control the appearance of a certain dataset via hidden property, though if I change type to line and invoke update() it won't re-render.
So, is there a way to dynamically change dataset type?

Found a workaround here: Chart.js: Dynamic Changing of Chart Type (Line to Bar as Example)
Sad that it's not yet supported officially.