We Keep Coding

Chart js data label anchor not changing

I am using chartjs-plugin-datalabels to display data labels in stacked bar chart using Chart.js
const stackedConfig = {
type: 'bar',
data: {
labels: ['Manager 1', 'Manager 2', 'Manager 3', 'Manager 4', 'Manager 5'],
datasets: [{
label: 'DATA1',
data: [2, 8, 3, 4, 5],
backgroundColor: '#22242C'
}, {
label: 'DATA2',
data: [1, 2, 3, 4, 5],
backgroundColor: '#FFA755'
}, {
label: 'DATA3',
data: [3, 1, 3, 4, 5],
backgroundColor: '#B48DD3'
}, {
label: 'DATA4',
data: [5, 2, 3, 4, 5],
backgroundColor: '#6160DC'
}, {
label: 'DATA5',
data: [2, 1, 3, 4, 5],
backgroundColor: '#54C5EB'
}, {
label: 'DATA5',
data: [1, 2, 3, 4, 5],
backgroundColor: '#FF4A55'
}],
barPercentage: 0.5
},
plugins: [ChartDataLabels],
options: {
barPercentage: 0.5,
plugins: {
legend: {
position: 'right',
display: false,
},
datalabels: {
anchor: 'center',
align: 'center',
color: 'white',
font: {
weight: 'bold'
},
formatter: Math.round
},
},
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
};
var stackedCtx = document.getElementById("stacked-1-canvas").getContext('2d');
new Chart(stackedCtx, stackedConfig);
Even after putting anchor: 'center' in datalabels option, the labels are anchor at start. Even if I leave out the option, the default anchor should be center, but even then its anchored to the start position.
Please help me sort this out.

Using Trellis Chart with Stacked Columns in Highcharts

I have a time series data which I want to show as a trellis chart:
Here is a basic version of Trellis Chart from the Highcharts website:
Instead of Erik, Gert, Helge, Torstein, I am working to replace it with groups: Client, DII, FII, PRO.
In this chart below, fruits name is a simple series but here I have a time series data: Fut Index Longs and Fut Index Shorts.
Each of the above groupings( Client, DII...) have their own version of Fut Index Longs and Fut Index Shorts.
I want to show Fut Index Longs, Fut Index Shorts as stacked with the x-axis denoting the different days.
I have tried to use a nested series to accomplish this, but there is no data being displayed. Here is my source:
var charts = [],
$containers = $('#trellis td'),
datasets = [
{
name: 'Client',
data:
[
{
name: "Fut Index Longs",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
},
{
name: "Fut Index Shorts",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
}
]
},
{
name: 'DII',
data:
[
{
name: "Fut Index Longs",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
},
{
name: "Fut Index Shorts",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
}
]
},
{
name: 'FII',
data:
[
{
name: "Fut Index Longs",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
},
{
name: "Fut Index Shorts",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
}
]
},
{
name: 'PRO',
data:
[
{
name: "Fut Index Longs",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
},
{
name: "Fut Index Shorts",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
}
]
}
];
$.each(datasets, function(i, dataset) {
charts.push(new Highcharts.Chart({
chart: {
renderTo: $containers[i],
type: 'bar',
marginLeft: i === 0 ? 100 : 10
},
title: {
text: dataset.name,
align: 'left',
x: i === 0 ? 90 : 0
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime'
},
yAxis: {
allowDecimals: false,
title: {
text: null
},
min: 0,
max: 10
},
plotOptions: {
column: {
stacking: 'normal'
}
},
legend: {
enabled: false
},
series: [dataset]
}));
});
The link to jsfiddle: http://jsfiddle.net/g6jLhux2/
What am I doing wrong?

In your case, you need to use
series: dataset.data
Also, your x-axis are not datetime but categories, because datetime are supposed to be passed as numbers (milliseconds). You must then use:
xAxis: {
type: 'category'
},
if you want to properly show the data in your charts. See updated jsfiddle
Does it help you ?

How to add markers to a grouped bar plot in Highcharts?

I'm using Highcharts to create a grouped bar chart and looking to add markers for each bar.
I've created a multi-series (bar + scatter) plot that is similar to what I want, but since there is no "grouped scatter" plot, the circle marks are centered (Screenshot attached below).
Is there a way to change it so the marks appear on the same row as the bar?
JSFiddle
Highcharts Config
{
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['One', 'Two', 'Three']
},
tooltip: {
enabled: true
},
series: [
{
name: '2015',
data: [7, 8, 9]
},
{
name: '2015 Goal',
marker: {
symbol: 'circle'
},
data: [5, 6, 6],
type:'scatter'
},
{
name: '2016',
data: [9, 9, 10]
},
{
name: '2016 Goal',
marker: {
symbol: 'circle'
},
data: [10,12,13],
type:'scatter'
}
]
}

Set x value for the point. By default x values for the scatter are integers - 0, 1, 2 so they are centered according to the category. You can move them a little by 0.15 and then in the pointFormatter round those values.
series: [{
name: '2015',
data: [7, 8, 9]
}, {
name: '2015 Goal',
marker: {
symbol: 'circle'
},
data: [
[-0.15, 5],
[1 - 0.15, 6],
[2 - 0.15, 6]
],
type: 'scatter'
}, {
name: '2016',
data: [9, 9, 10]
}, {
name: '2016 Goal',
marker: {
symbol: 'circle'
},
data: [
[0.15, 10],
[1 + 0.15, 12],
[2 + 0.15, 13]
],
type: 'scatter'
}]
In pointFormatter:
plotOptions: {
scatter: {
tooltip: {
pointFormatter: function() {
return `x: <b>${Math.round(this.x)}</b><br/>y: <b>${this.y}</b><br/>`
}
}
}
},
example: http://jsfiddle.net/kh8b4jy3/

Highcharts - line between two categories

I have a chart that is of type column range and my requirement is to have a line connecting two categories.
JsFiddle
$(function() { $('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Test'
},
subtitle: {
text: 'Sample'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar'],
visible: false
},
yAxis: {
visible: false
},
legend: {
enabled: false
},
series: [{
name: 'Series1',
data: [
[0, 3],
[0, 3],
[0, 3]
],
pointPlacement: -0.20,
pointWidth: 50
}, {
name: 'Series2',
data: [
[3, 6],
[3, 6],
[3, 6]
],
pointPlacement: 0,
pointWidth: 1
}, {
name: 'Series3',
data: [
[6, 9],
[6, 9],
[6, 9]
],
pointPlacement: 0.20,
pointWidth: 50
}] });});
How do I draw a line from one category to another?
Is there any property available?

You should be able to achieve similar chart by simply adding new line series to your chart:
{
name: 'Series4',
type: 'line',
marker: {
enabled: false
},
index: 1,
data: [
[0, 1.5],
[1, 1.5],
[2, 1.5]
],
},
Here you can see an example how this chart may work: http://jsfiddle.net/ebtygovh/6/
You can also use renderer.path for adding lines to your chart: http://api.highcharts.com/highcharts/Renderer.path

jQuery Flot won't show months in X axis as labels

As said, X axis label is not showing months as expected. What I doing wrong ?
Here is my example code
HTML:
<div id="placeholder"></div>
CSS:
#placeholder {
height: 300px;
}
Javascript:
var d1 = [
[1388530800, 4],
[1393542000, 8],
[1396216800, 3],
[1398808800, 16],
[1401487200, 2],
[1404079200, 2],
[1406757600, 28],
[1409436000, 24],
[1412028000, 0],
[1414710000, 18],
[1417302000, 0],
[1419980400, 11]
];
var d2 = null;
var d3 = null;
var d4 = null;
var d5 = null;
var d6 = [
[1388530800, 2],
[1396303200, 2],
[1398895200, 1],
[1401573600, 1],
[1406844000, 1],
[1409522400, 1],
[1417388400, 1]
];
var data1 = [{
data: d1,
points: {
fillColor: "#d1e399"
},
color: '#d1e399'
}, {
data: d2,
points: {
fillColor: "#ecc0ce"
},
color: '#ecc0ce'
}, {
data: d3,
points: {
fillColor: "#daeaed"
},
color: '#daeaed'
}, {
data: d4,
points: {
fillColor: "#e6ceea"
},
color: '#e6ceea'
}, {
data: d5,
points: {
fillColor: "#edb9a6"
},
color: '#edb9a6'
}, {
data: d6,
points: {
fillColor: "#92e48a"
},
color: '#92e48a'
}];
$.plot($("#placeholder"), data1, {
xaxis: {
mode: "time",
minTickSize: [1, "month"],
tickLength: 1,
ticks: 12
},
yaxis: {
tickSize: 5
},
grid: {
hoverable: true,
borderWidth: 1
},
series: {
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.1
}, {
opacity: 0.13
}]
}
},
points: {
show: true,
lineWidth: 2,
radius: 3
},
shadowSize: 0,
stack: true
},
clickable: true,
hoverable: true
});
Code in JSFiddle -> http://jsfiddle.net/v5M9L/11/
Thanks for your help !

I suspect your problem is that your timestamps are in seconds rather than milliseconds. Multiply all your data by 1000 appears to give the result you want:
{ data: d1.map(function(d) { return [d[0] * 1000, d[1]]; }), points: { fillColor: "#d1e399" }, color: '#d1e399'}
http://jsfiddle.net/v5M9L/12/