Develop Reference

Chart js label issue in react js

I used chart js to display data but the labels are not applying properly, it applies to single column
my chart code is :
var dates = ['Lonely','Relationship','Anexity','Hurt','Fear'];
var ctxallSelect = document.getElementById('Emotional');
window.allEmotion = new Chart(ctxallSelect, {
type: 'bar',
data: {
labels: dates,
datasets: [{
label: 'Lonely',
backgroundColor: [
'rgb(0, 156, 182)'
],
borderColor: [
'rgb(0, 156, 182)'
],
data:[this.state.Lonely],
fill: false,
}, {
label: 'Relationship',
fill: false,
backgroundColor: [
'rgb(0, 156, 182)'
],
borderColor: [
'rgb(0, 156, 182)'
],
data: [this.state.Relationship],
},
But my chart label appear as below:

Your issue is related to way you are setting your data inside dataset.
I did a live demo for you solving the issue:
https://codesandbox.io/s/boring-banach-lvffs?file=/src/App.js
Data is an array, each position of that array means one column, so you should do like:
datasets: [
{
label: "Lonely",
.....
data: [30]
},
{
label: "Relationship",
.....
data: [0,45]
},

How to create float charts with chartjs?

I tried creating float charts with chartjs but it does not seem to work. I tried copying the same example as they have http://pravopys.net/chartjs/samples/charts/bar/vertical.html but mine does not render at all or throw any errors.
var myBarChart = new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ['January', 'February', 'March'],
datasets: [
{
label: "Population (millions)",
data: [
[-2, 5],
[-20, 70],
[30, 80]
],
backgroundColor: "rgba(75, 192, 192, 0.2)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
fill: false,
lineTension: 0,
type: "bar"
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
Not sure what I'm doing wrong here. The example shows the data structure for the dataset being used exactly how I'm using it.
Any help is greatly appreciated.
Plunker link: http://www.plnkr.co/edit/bD1MgVvjuq7B4RM5Qcmh?p=preview

You need a 2d context to draw the chart on. Here's a working example:
Do these 2 changes in your code:
HTML
<canvas id="bar-chart" width="400" height="400"></canvas>
Javascript
var ctx = document.getElementById("bar-chart").getContext("2d");
var myBarChart = new Chart(ctx, ...)
Source: https://www.chartjs.org/docs/latest/#creating-a-chart

gradient background on radar chartjs

I've got a radar chartJs.
I cant figure out how to put inside the area a radial gradient.
When putting the current code, it only takes 1 color as background-color by default
current code:
let ctx = document.getElementById('chart-0').getContext("2d");
let gradient = ctx.createLinearGradient(0.000, 150.000, 300.000, 150.000);
// Add colors
gradient.addColorStop(0.035, 'rgba(234, 25, 78, 1.000)');
gradient.addColorStop(0.225, 'rgba(0, 8, 249, 1.000)');
gradient.addColorStop(0.983, 'rgba(42, 255, 0, 1.000)');
let data = {
backgroundColor: gradient,
labels: labelData,
datasets: [{
borderColor: presets.red,
data: [20,20,20,20,20],
label: labeldata
}]
};
const options = {
maintainAspectRatio: true,
spanGaps: false,
scale: {
pointLabels: {
fontSize: 14
}
},
elements: {
line: {
tension: 0.000001
}
},
legend: {
labels: {
fontSize: 16
}
}
};
chart = new Chart('chart-0', {
type: 'radar',
data: data,
options: options
});

Each dataset also should include backgroundColor property with assigned gradient values. I've created JSFiddle based on your code.

Chartjs 2 - Stacked bar with marker on top

I´m trying to build a stacked bar chart with a marker on top.
how it should look like
.
So I tried to build a bar chart and combine it with a line chart, but that doesn´t work well.
my result so far
.
Is there a way to get a similar result ?
var chartData = {
labels: ["Zukauf", "Produktion"],
datasets: [
{
label: "offene TP",
data: [102, 55],
backgroundColor: "rgba(15,173,25,1)",
hoverBackgroundColor: "rgba(15,173,25,1)"
},{
label: "erledigte TP",
data: [256, 55],
backgroundColor: "rgba(220,111,18,1)",
hoverBackgroundColor: "rgba(220,111,18,1)"
},{
type: "line",
label: "Plan",
data: [425],
backgroundColor: "rgba(255,255,255,0)",
borderColor: "rgba(0,0,0,0.4)",
borderWidth: 2,
hoverBackgroundColor: "rgba(12,128,133,1)"
}
]
};

After few confusing researches in the chartjs documentation I found the perfect solution.
solution picture
var chartData = {
labels: ["Zukauf", "Produktion"],
datasets: [
{
label: "offene TP",
data: [102, 55],
backgroundColor: "rgba(220,111,18,1)",
hoverBackgroundColor: "rgba(220,111,18,1)"
},{
label: "erledigte TP",
data: [256, 55],
backgroundColor: "rgba(15,173,25,1)",
hoverBackgroundColor: "rgba(15,173,25,1)"
},{
label: "Plan",
data: [425, 500],
borderColor: "rgba(0,0,0,1)",
//important settings
//set the width of the line ( or point )
pointRadius: 50,
// don´t show line betrween points
showLine: false,
//change points of line chart to line style ( little bit confusin why it´s named point anyway )
pointStyle: 'line',
//chart type
type: "line",
}
]
};
Only need to change the 'pointStyle' to 'line', the 'pointRadius' for the width of the line and disable 'showLine'.

Hide points in ChartJS LineGraph

Originally I set the fill color for each point to be completely transparent. If I run my mouse over the graph, the points pop up. I want to hide all points so that the line graph is smooth.

You can achieve this by setting point's radius property in configuration options as follows:
var chartConfig = {
type: 'line',
options: {
elements: {
point:{
radius: 0
}
}
}
}
Tooltips for the points will also gone off.

You can set the pointRadius to zero.
var myChart = new Chart(
ctx, {
type: 'line',
data: {
labels: [...]
datasets: [
{
data: [...],
pointRadius: 0, # <<< Here.
}
]
},
options: {}
})

I had the same problem, but I wanted to keep the hover option active.
There is my solution:
const config = {
type: 'line',
data: {
datasets:[{
label: 'Température',
borderColor: 'rgb(255, 99, 132)',
data: tempE,
pointStyle: 'rect',
}]
},
options: {
elements:{
point:{
borderWidth: 0,
radius: 10,
backgroundColor: 'rgba(0,0,0,0)'
}
}
}
};