Develop Reference

How to add a second datalabel to ChartJs bar charts?

I have a chart as below, it has a datalabel inside each stacked bar showing a percentage. Now I am wanting to add a second set of datalabel on top of each bar(consider each set of stacked bar as one bar) that shows the month, say for person 1, the right bar says current month(may), the middle one says last month(april), the left bar says march.
I only need three month.
Any help is appreciated.
const trend_options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
datalabels: {
formatter: function(value, ctx) {
const otherDatasetIndex = ctx.datasetIndex === 0 ? 1 : 0;
const total = ctx.chart.data.datasets[otherDatasetIndex].data[ctx.dataIndex] + value;
return `${(value / total * 100).toFixed()}%`;
},
font: {
weight: "bold"
},
color: "#fff",
display: function(context) {
let index = context.dataIndex;
let value = context.dataset.data[index];
return value > 0; // display labels with a value greater than 0
}
},
},
scales: {
x: {
stacked: true
},
y: {
stacked: true,
suggestedMax: 15,
ticks: {
beginAtZero: true,
stepSize: 5,
}
}
},
};
const app_data_trend = [{
label: 'App Month 1 TW',
data: [3, 4, 5, 6, 4, 4, 4],
backgroundColor: '#007bff',
stack: 'Stack 0',
},
{
label: 'App Month 1 jira',
data: [3, 4, 5, 4, 3, 2, 3],
backgroundColor: '#6DB526',
stack: 'Stack 0',
},
{
label: 'App Month 2 TW',
data: [4, 4, 4, 3, 2, 5, 4],
backgroundColor: 'pink',
stack: 'Stack 1',
},
{
label: 'App Month 2 jira',
data: [4, 2, 5, 2, 3, 3, 4],
backgroundColor: 'red',
stack: 'Stack 1',
},
{
label: 'App Month 3 TW',
data: [2, 4, 5, 2, 4, 5, 3],
backgroundColor: 'grey',
stack: 'Stack 2',
},
{
label: 'App Month 3 jira',
data: [1, 1, 2, 4, 4, 3, 5],
backgroundColor: 'yellow',
stack: 'Stack 2',
},
]
const ctx8 = document.getElementById("tsa-applications-trending");
const chart8 = new Chart(ctx8, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: ['person1', 'person2', 'person3', 'person4'],
datasets: app_data_trend
},
options: trend_options,
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0"></script>
<div class="chart-container" style="position: relative; height:80vh; width:80vw">
<canvas id="tsa-applications-trending"></canvas>
</div>

ApexChart fixed labels x asis for rangeBar chart

This is my chart option code:
const options = {
chart: {
type: "rangeBar",
},
series: [
{
data: [
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 12, 30), Date.UTC(2019, 3, 2, 13, 0)],
},
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 15, 30), Date.UTC(2019, 3, 2, 16, 0)],
},
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 18, 0), Date.UTC(2019, 3, 2, 19, 0)],
},
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 22, 0), Date.UTC(2019, 3, 2, 24, 0)],
},
],
},
],
plotOptions: {
bar: {
horizontal: true,
},
},
xaxis: {
type: "datetime",
},
};
And this is the result:
I don't know how to add fixed labels from 00:00 to 24:00 hour format. That's my problem.
I also did this but doesn't work:
xaxis: {
type: "category",
categories: ["00:00", ..., "24:00"]
},
Thanks

Finally i fixed this in this repo:
https://github.com/mortezasabihi/apexchart-timeline

Highcharts - Force area-step series to overlap columns series at beginning and end of x axis

Codepen: https://codepen.io/Lothain/pen/GRjBOyw
chart: {
type: 'column'
},
title: {
text: 'Job Billings By Month'
},
xAxis: {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',]
},
yAxis: {
min: 0,
title: {
text: 'Cost in USD'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
},
area: {
marker: {
enabled: false
},
lineColor: 'rgb(205,70,43)',
fillColor: 'rgb(240,198,189)'
}
},
series: [{
name: 'T&M',
data: [5, 3, 4, 7, 2, 4, 2, 5, 2, 8, 11, 3],
color: 'rgb(208,224,227)'
}, {
name: 'Workorder',
data: [2, 2, 3, 2, 1, 3, 4, 4, 2, 5, 4, 2],
color: 'rgb(207,226,243)'
}, {
name: 'Change Order',
data: [3, 4, 4, 2, 5, 4, 2, 5, 2, 8, 8, 2],
color: 'rgb(201,218,248)'
}, {
name: 'Main Contract',
data: [3, 4, 4, 2, 5, 2, 8, 11, 3, 4, 8, 3],
color: 'rgb(164,194,244)'
}, {
name: 'Projected Billed',
type: 'line',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
color: 'rgb(255,109,1)'
}, {
name: 'Cost',
type: 'area',
step: 'center',
color: 'red',
opacity: .5,
data: [4,4, 5, 3, 1, 4, 7, 5, 3, 2, 5, 9]
}]
});
Goal: https://imgur.com/a/Vo7ORj7
I would like the step-area series to extend to the edges of the x-axis, rather than end in the middle of the column they overlap. I'm sure this is possible but I do not know how; I have tried using the series.type.area.step option (center, left, right) to no avail.

You can add one more area series with the same data as the current one, but also with the below options:
series: [..., {
name: 'Cost',
type: 'area',
step: 'center',
color: 'red',
lineWidth: 0,
zIndex: -1,
data: [4000, 4000, 5000, 3000, 1000, 4000, 7000, 5000, 3000, 2000, 5000, 9000]
}, {
linkedTo: ':previous',
stacking: false,
type: 'area',
step: 'center',
color: 'red',
fillColor: 'transparent',
data: [4000, 4000, 5000, 3000, 1000, 4000, 7000, 5000, 3000, 2000, 5000, 9000]
}]
Live demo: http://jsfiddle.net/BlackLabel/m6gsrn8o/
API Reference: https://api.highcharts.com/highcharts/series.area

Can a wind rose chart be created in ECharts?

A very common chart in weather and maritime is a wind rose chart.
Is it possible in echarts to create one of these? It has segmented bands of speed and various sectors per 0-360 directions. See sample chart below or a example of how Plotly gets it done in their library: https://plotly.com/javascript/wind-rose-charts/
If so, what would the code look like? I attempted to alter this sample (https://echarts.apache.org/examples/en/editor.html?c=bar-polar-stack-radial), but it seems in order to get the segmented bands we need to use category in the angleAxis which is not correct.

Take a look on this work. I found this chart (and similar) on the Echarts Gallery but gallery takes a very long time to load or not available on some days but today i'm lucky:
var myChart = echarts.init(document.getElementById('chart'));
var legendName = [
"0.0-0.2 m/s",
"0.3-1.5 m/s",
"1.6-3.3 m/s",
"3.4-5.4 m/s",
"5.5-7.9 m/s",
"8.0-10.7 m/s",
"10.8-13.8 m/s",
"13.9-17.1 m/s",
"17.2-20.7 m/s",
"20.8-24.4 m/s",
"24.5-28.4 m/s",
"28.5-32.6 m/s",
">32.6 m/s"
]
var vocs = [
"0.3 mg/m³",
"0.4 mg/m³",
"0.3 mg/m³",
"0.3 mg/m³",
"0.5 mg/m³",
"0.23 mg/m³",
"0.2 mg/m³",
"0.7 mg/m³",
"0.6 mg/m³",
"0.2 mg/m³",
"0.1 mg/m³",
"0.1 mg/m³",
"0.6 mg/m³",
];
var option = {
tooltip: {
trigger: 'item',
textStyle: {
color: '#fff'
}
},
color: ["#0001F7", "#00B8FE", "#00FFFF", "#00FF68", "#BEFE00", "#FFFF00", "#FFA800", "#E10100"],
angleAxis: {
type: 'category',
data: ["北", "北东北", "东北", "东东北", "东", "东东南", "东南", "南东南", "南", "南西南", "西南", "西西南", "西", "西西北", "西北", "北西北"],
boundaryGap: false, //标签和数据点都会在两个刻度之间的带(band)中间
axisTick: {
show: false //是否显示坐标轴刻度
},
splitLine: {
show: true,
lineStyle: {
// color:"black"
},
},
axisLabel: {
show: true,
interval: 1, //坐标轴刻度标签的显示间隔，在类目轴中有效
},
},
radiusAxis: {
min: 0,
max: 100,
axisLabel: {
show: false
},
axisTick: {
show: false //是否显示坐标轴刻度
},
axisLine: {
show: false //是否显示坐标轴轴线
},
},
polar: {},
series: [{
type: 'bar',
data: [17, 2, 18, 4,
2, 3, 4, 6,
1, 6, 3, 4,
2, 3, 4, 6
],
coordinateSystem: 'polar',
name: legendName[0],
stack: 'a'
}, {
type: 'bar',
data: [7, 12, 13, 2,
2, 3, 4, 6,
1, 2, 3, 2,
2, 3, 4, 6
],
coordinateSystem: 'polar',
name: legendName[1],
stack: 'a'
}, {
type: 'bar',
data: [10, 12, 13, 4,
2, 13, 14, 26,
11, 12, 23, 34,
12, 33, 34, 32
],
coordinateSystem: 'polar',
name: legendName[2],
stack: 'a'
}, {
type: 'bar',
data: [10, 2, 13, 2,
2, 3, 4, 6,
1, 2, 3, 2,
2, 3, 4, 6
],
coordinateSystem: 'polar',
name: legendName[3],
stack: 'a'
}, {
type: 'bar',
data: [10, 2, 13, 4,
2, 3, 4, 6,
1, 2, 3, 4,
1, 2, 3, 1
],
coordinateSystem: 'polar',
name: legendName[4],
stack: 'a'
}, {
type: 'bar',
data: [10, 2, 13, 2,
2, 3, 4, 6,
1, 2, 3, 2,
1, 2, 3, 1
],
coordinateSystem: 'polar',
name: legendName[5],
stack: 'a'
}, {
type: 'bar',
data: [10, 2, 13, 4,
2, 3, 4, 6,
1, 2, 3, 4,
2, 3, 4, 2
],
coordinateSystem: 'polar',
name: legendName[6],
stack: 'a'
}, {
type: 'bar',
data: [1, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0
],
coordinateSystem: 'polar',
name: legendName[7],
stack: 'a'
}],
legend: {
show: true,
data: legendName,
width: 500, //根据宽度调整换行
}
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.9.0/dist/echarts.min.js"></script>
<div id="chart" style="width: 600px;height:600px;"></div>

Reading external source of data in Highchart 3D bar

This is the code of 3D bar chart where the data is loaded manually but I want to import data from external source.Can you help me in this code. I have also posted the jsfiddle link of this chart below the code.Thanks!
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 35,
beta: 15,
depth: 110
}
},
plotOptions: {
bar: {
depth: 40,
stacking: true,
grouping: false,
groupZPadding: 10,
dataLabels:{enabled:true}
}
},
series: [{
data: [1, 2, 4, 3, 2, 4],
stack: 0
}, {
data: [5, 6, 3, 4, 1, 2],
stack: 1
}, {
data: [7, 9, 8, 7, 5, 8],
stack: 2
}]
});
http://jsfiddle.net/4dccq/481/