Develop Reference

Chart.js multiple datasets on one y axis

I am using chartjs v3 (latest) and I'm trying to render a graph with multiple datasets that share one y axis.
Currently I have the following code:
const buff = await defaultChartRenderer({
type: 'line',
data: {
labels: data.value.filter(v => v.type === 'online').map(v => moment(new Date(v._time)).format(data.format)),
datasets: [
{
data: allOnline,
borderColor: '#43b581',
backgroundColor: 'rgba(0,0,0,0)',
label: 'Online',
normalized: true
},
{
data: allOffline,
borderColor: '#ff0000',
backgroundColor: 'rgba(0,0,0,0)',
label: 'Offline',
normalized: true
},
{
data: allIdle,
borderColor: '#faa61a',
backgroundColor: 'rgba(0,0,0,0)',
label: 'Idle',
normalized: true
},
{
data: allDnd,
borderColor: '#f04747',
backgroundColor: 'rgba(0,0,0,0)',
label: 'DND',
normalized: true
}
]
},
options: {
scales: {
y: {
suggestedMax: Math.max(...[...allOffline, ...allOnline, ...allDnd, ...allIdle]),
suggestedMin: Math.min(...[...allOffline, ...allOnline, ...allDnd, ...allIdle]),
stacked: true,
ticks: {
beginAtZero: false,
precision: 0,
},
gridLines: {
zeroLineColor: "rgba(255, 255, 255, 0.8)",
color: "rgba(255, 255, 255, 0.4)"
},
stacked: true,
id: 0,
position: 'left'
},
},
legend: {
//display: false,
labels: {
fontColor: 'white',
fontSize: 20
}
},
tooltips: {
enabled: false
}
}
})
The defaultChartRenderer function does not modify my input at all.
The following data gets passed in as allOnline, allOffline, allIdle, and allDnd:
[
2, 2, 3, 3,
3, 2, 2
] [
4, 4, 4, 3,
4, 4, 3
] [
1, 1, 1, 1,
0, 0, 1
] [
1.5, 1, 2, 2,
2, 2, 2
]
I would expect this to output a graph with that data, but instead only the allOnline data shows properly. Everything else gets moved upwards.
Current Output: https://imgur.com/a/prGiyxy
Am I doing something wrong? I've tried adding yAxisID to all of the datasets and sharing one id between all of them, but that didn't work. I've also tried without normalize: true.

To make it work as expected, remove the option scales.y.stacked or set it to false.
For further information, please consult the chapter Stacking from the Chart.js documentation.
UPDATE
stacked: true is defined twice on your y-axis. Remove both of them, and it should work.

Change the color of a line in flot.js

I have a line graph with data for each month. No matter where I add the color option in the option list or even as part of the data the line is still the default yellow.
Here is the code that has it working with the default.
Where do i need to add a color variable to make it display.
var plotData = [[1, data.data['Jan']], [2, data.data['Feb']], [3, data.data['Mar']], [4, data.data['Apr']], [5, data.data['May']], [6, data.data['June']], [7, data.data['July']], [8, data.data['Aug']], [9, data.data['Sep']], [10, data.data['Oct']], [11, data.data['Nov']], [12, data.data['Dec']]];
$.plot('#placeholder', [plotData]), {
series: {
lines: {
show: true,
lineWidth: 4,
},
points: {
show: true
},
shadowSize: 0
},
grid: {
hoverable: true,
clickable: false,
borderColor: '#EDEDED',
borderWidth: 1,
labelMargin: 15,
backgroundColor: '#FFF'
},
yaxis: {
min: 0,
color: '#EDEDED'
},
xaxis: {
color: '#FFF',
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: '%x: %y',
shifts: {
x: -30,
y: 25
},
defaultTheme: false
}
}

Move the ) from behind [plotdata] to the end of the options object:
$.plot('#placeholder', [plotData]), {
^
As it is now, you call plot without options, so the default options are used.
Here is a fiddle which shows the working code.
For the right way to define custom colors, see here or in the above fiddle.

jQuery flot multi bar chart side by side

I'm using jQuery plot with the categories plugin to create charts.
I want to plot two bars side by side for each month with this code:
$.plot(".chart", [ { label: "Neue Mitglieder", data: data, order: 1 }, { label: "Fällige Kündigungen", data: data2, order: 2 } ], {
series: {
bars: {
show: true,
barWidth: 0.5,
align: "center",
}
},
xaxis: {
mode: "categories",
ticks: [[0,"Jan"], [1,"Feb"], [2,"Mär"], [3,"Apr"], [4,"Mai"],
[5,"Jun"], [6,"Jul"], [7,"Aug"], [8,"Sep"], [9,"Okt"], [10,"Nov"], [11,"Dez"]],
tickLength: 1,
},
grid: {
hoverable: true,
},
yAxis: {
allowDecimals:false,
}
});
And that's my result:
The bars are still overlapping but I want my result to look like
Does anyone know what's wrong with my code? I thought the "order" option will fix that problem, but it didn't change anything.
Here's the jsfiddle: http://jsfiddle.net/buk8mhy8/

Found 2 mistakes in your fiddle
jquery.flot.orderBars.js link is wrong.
Removed order:1 and 2 from series data
updated your series default object with this
series: {
bars: {
show: true,
barWidth: 0.15,
order: 1
}
}
Check the updated fiddle
Hope this helps.

I tried to use orderBars plugin but the result was not what I expected. So what I did was:
Use the categories plugin
Define left and right align
obs: It works only with two bars side-by-side.
The Code:
var data1 = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ];
var data2 = [ ["January", 1], ["February", 5], ["March", 6], ["April", 3], ["May", 37], ["June", 39] ];
$.plot($("#placeholder"),
[{ data: data1,
bars: {
show: true,
barWidth: 0.2,
align: "left",
}
},
{
data: data2,
bars: {
show: true,
barWidth: 0.2,
align: "right",
}
}
],
{
xaxis: {
mode: "categories",
tickLength: 0
}
}
);
The result:

Flot - Plotting Month, Priority & Owner

I have a question with regards to plotting data using Flot.
I am looking to Plot a Priority as Series, the Month in which the Priority occured, but also an Owner of that Priority.
I am looking for the Owner to have a stacked column of priorites in the relevant month.
Below is the Fiddle, which I have the Month and priority, but I am very confused when it comes to adding in an Owner.
Any help is much appreciated.
var graphP1 = [
["JAN", 5],
["FEB", 3],
["MAR", 22]
];
var graphP2 = [
["JAN", 3],
["FEB", 12],
["MAR", 9]
];
var graphP3 = [
["JAN", 7],
["FEB", 18],
["MAR", 7]
];
var graphP4 = [
["JAN", 9],
["FEB", 9],
["MAR", 3]
];
var data = [{
label: "P1",
data: graphP1,
bars: {
show: true,
fill: true,
lineWidth: 1,
order: 1,
fillColor: "#808080",
barWidth: 0.5,
align: "center"
},
color: "#808080"
}, {
label: "P2",
data: graphP2,
bars: {
show: true,
fill: true,
lineWidth: 1,
order: 1,
fillColor: "#f00",
barWidth: 0.5,
align: "center"
},
color: "#f00"
}, {
label: "P3",
data: graphP3,
bars: {
show: true,
fill: true,
lineWidth: 1,
order: 1,
fillColor: "#ffa500",
barWidth: 0.5,
align: "center"
},
color: "#ffa500"
}, {
label: "P4",
data: graphP4,
bars: {
show: true,
fill: true,
lineWidth: 1,
order: 1,
fillColor: "#e9e96c",
barWidth: 0.5,
align: "center"
},
color: "#e9e96c"
}];
$.plot($("#thegraph"), data, {
yaxis: {
tickFormatter: function (val, axis) {
return (val);
}
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
Fiddle

For stacking bars you need to add the stack plugin and add the option:
series: {
stack: true
},
See the updated fiddle.

Custom HighCharts - change the height of plotLines , show the marker value by default at a specific x and y

I am trying to customize highcharts
1) I need to change the height of the plotlines
2) Show the marker value inside the marker image itself at a specific place(Inside the white circles at the top)
This is what I have achieved so far
Highcharts.setOptions({
global: {
useUTC: false
}
});
/*function updateData(x,y)
{
var series = chart.series[0];
series.addPoint([x, y], true, true);
}*/
var chart;
$(function () {
var color = '#AA34FF';
$('#container').highcharts({
chart: {
events: {
load: function(event) {
_bindCustomEvents();
}
},
backgroundColor: 'transparent'
},
series: [
{
color:
{
linearGradient:
{
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops:
[
/*[0, '#a83e3e'],
[0.21, '#d34e47'],
[0.40, '#edbb5a'],
[0.57, '#e2e57a'],
[0.76, '#8dcc63'],
[1, '#7ab237']*/
[0, '#7ab237'],
[0.21, '#8dcc63'],
[0.40, '#e2e57a'],
[0.57, '#edbb5a'],
[0.76, '#d34e47'],
[1, '#a83e3e']
]
},
lineWidth: 4,
marker: {
enabled: false,
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null,
},
type: 'spline',
data: [1, 2, 5, 3, 6, 7, 4],
backgroundColor: 'transparent',
plotShadow : false
},
{
name: '',
marker: {
symbol: 'diamond'
},
//same inmage for all points
marker: {
symbol: 'url(http://fc08.deviantart.net/fs71/f/2014/016/b/9/top_marker_by_skyrbe-d72ewk0.png)'
},
data: [8,8,8,8,8,8,8],
type:'scatter'
},
{
name: '',
marker: {
symbol: 'diamond'
},
//same inmage for all points
marker: {
symbol: 'url(http://fc03.deviantart.net/fs71/f/2014/016/f/a/bottom_marker_by_skyrbe-d72ew7w.png)'
},
data: [-1,-1,-1,-1,-1,-1,-1],
type:'scatter'
}
],
xAxis: {
categories: [
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat'
],
title: {
enabled: true,
text: null,
},
labels: {
style: {
fontFamily: 'gestaregular',
fontSize: '16px',
color:'#fff'
}
},
plotLines: [
{ // mark the weekend
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 0,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 1,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 2,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 3,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 4,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 5,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 6,
dashStyle: 'dash',
zIndex:10
}],
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
},
yAxis: {
labels: {
enabled: false
},
title: {
enabled: true,
text: null,
}
},
legend: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
});
});
function _bindCustomEvents()
{
var chart = $('#container').highcharts();
chart.setTitle({ text: ''});
$('.highcharts-axis').hide();
$('.highcharts-grid').hide();
$('.highcharts-axis').find('path').hide();
}
FIDDLE LINK
This is how I want it to look like : Instead of '2' in the top circles , it should be the corresponding value from the center spline [1, 2, 5, 3, 6, 7, 4]

1) The plotLines are infinite. The extend as far as the plot area is. So, to limit this, how about you change your yAxis max:
yAxis: {
max: 8,
labels: {
enabled: false
},
title: {
enabled: true,
text: null
}
},
Or, you could create a column series on the points you want and give them a certain value for the height you want. Making the columns thin to mimic your plotLines will help like so:
series: [{
name: '',
type: 'column',
pointWidth: 1,
borderWidth: 0,
data: [8, 8, 8, 8, 8, 8, 8]
},
...
2) Which values in the circles (I am guessing)? The "Series 1: XX"? Or the whole tooltip?
EDIT:
For question 2 you can do this with a formatter function on the dataLabel for the scatter series (your circles). Here is the function:
var customFormatPoint = function (pointX, seriesIndex) {
var theChart = $('#container').highcharts();
var yValue = null;
var points = theChart.series[seriesIndex].options.data[pointX];
return points;
};
You call this from:
series: [{
name: '',
type: 'column',
pointWidth: 1,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
return customFormatPoint(this.point.x, 1);
}
},
data: [7.70, 7.70, 7.70, 7.70, 7.70, 7.70, 7.70]
}, {...
Key element here is that you have this.point.x which is that scatter point's xAxis location. You then need to send in which index the series is that contains the y value you want to show in the dataLabel.
I have also removed the plotLines and created a series that just contains the bars with width of 1 and no border. I had to mess around to get the end of the bar (its max value) to coincide with the scatter circle diameter.
Please see this jsFiddle.