Develop Reference

Chart.js - Mixed Chart: Bar Graph with Diagonal Line

Using Chart.js, trying to display a diagonal line (representing goal) over a bar graph (representing actual. I would like the actuals line to overlay the bar graph.
var ctx = document.getElementById(id).getContext('2d');
window[id] = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'Actual',
data: [10, 20, 30, 40],
backgroundColor: 'steelblue',
}, {
label: 'Goal',
data: [10, 20, 30, 40],
fill:false,
// Changes this dataset to become a line
type: 'line',
backgroundColor: "red",
borderColor:"red"
}],
labels: ['January', 'February', 'March', 'April']},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
But my chart comes out looking like this:
I've tried changing the order using the order: parameter for the bar and line but it did not change the appearance.

SOLUTION
The way I got this to work was to have the line elements first in the dataset.
Adding order:1 and order:2 to the bar/line datasets did not affect the display.

Chart.js doughnut type chart labels overlap on the chart

I am having a problem with chart.js and a doughnut type chart. I want to apply some offset/margin or other solution for the margin between chart and labels. Please view the below image for the issue.
var chart1;
var config1 = {
type: 'doughnut',
data: {
labels: ["NPD Brief", "Gate 1", "Gate 2", "Gate 3"],
datasets: [{
data: [2, 3, 5, 4], // Specify the data values array
borderColor: ['#ffffff', '#ffffff', '#ffffff', '#ffffff'], // Add custom color border
backgroundColor: ['#2453ed', '#5b7ef2', '#91a9f6', '#c8d4fa'], // Add custom color background (Points and Fill)
borderWidth: 2 // Specify bar border width
}]
},
options: {
responsive: true,
maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
legend: {
display: false,
position: 'left',
},
plugins: {
labels: [{
render: 'label',
position: 'outside',
//arc: true,
}, {
render: 'value',
fontColor: '#ffffff',
}]
},
title: {
display: true,
//text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
}
};

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.

Chart.js v2 - combined stacked bar chart and 2 unstacked lines

Can Chart.js v2.x generate a combined stacked bar chart with 2 unstacked lines utilizing one y-axis? If so, how?
Below fiddle has 2 y-axis. The descending line, would render better if the right y-axis had a maximum value of 6000 as does the left axis.
jsfiddle example.
Below is the code for reference.
// set default no fill beneath the line
Chart.defaults.global.elements.line.fill = false;
// stacked bar with 2 unstacked lines - nope
var barChartData = {
labels: ['2016', '2017', '2018', '2019'],
datasets: [{
type: 'bar',
label: 'a',
yAxisID: "y-axis-0",
backgroundColor: "rgba(217,83,79,0.75)",
data: [1000, 2000, 4000, 5000]
}, {
type: 'bar',
label: 'b',
yAxisID: "y-axis-0",
backgroundColor: "rgba(92,184,92,0.75)",
data: [500, 600, 700, 800]
}, {
type: 'line',
label: 'c',
yAxisID: "y-axis-0",
backgroundColor: "rgba(51,51,51,0.5)",
data: [1500, 2600, 4700, 5800]
}, {
type: 'line',
label: 'd',
yAxisID: "y-axis-1",
backgroundColor: "rgba(151,187,205,0.5)",
data: [5000, 3000, 1000, 0]
}]
};
var ctx = document.getElementById("chart").getContext("2d");
// allocate and initialize a chart
var ch = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: "Chart.js Bar Chart - Stacked"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
position: "left",
id: "y-axis-0",
}, {
stacked: false,
position: "right",
id: "y-axis-1",
}]
}
}
});

Turns out, I just needed a modification or two so that the 2 y-axis use the same scale. See this jsfiddle. Now the chart renders better. The key, in my case, is adding a ticks node and these two properties to both yAxes objects:
ticks: {
beginAtZero: true,
suggestedMax: 5800
}
Naturally, the suggestedMax value would not be hard coded. Further, since the 2 scales are now the same, I hid the right scale with this property setting display: false.
As the fiddle shows, we now have 2 unstacked lines on a stacked bar chart nicely rendered.

Use this as the data for the graph:
var barData = {
labels: ['test1','test2'],
datasets: [
{
label: 'stack1',
backgroundColor: 'yellow',
borderColor: 'white',
borderWidth: 1,
stack: '1',
data: [5,4,3,2,1]
},
{
label: 'stack2',
backgroundColor: 'blue',
borderColor: 'white',
borderWidth: 1,
stack: '2',
data: [1,2,3,4,5]
}
]
};
This is the component to render the data:
<Bar data={barData} options={{scales: { xAxes: [{stacked:true}} }], yAxes:[{stacked:true}}] } }}}} />

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)'
}
}
}
};