High Charts export-server not rending legend LabelFormatter - node.js

I have the following code for the node.js high-Charts export-server the legend is showing but the label formatted is not applied and the function is not executed also
I have tried the load function also and it is not working, I tried custom HTML and it is now showing also
let chartDetails = {
type: "png",
options: {
chart: {
type: "pie",
showInLegend: true,
dataLabels: {
enabled: false
}
},
title: {
align: 'left',
floating: false,
text: 'Main Title',
style: {
fontSize: '24px'
}
},
subtitle: {
verticalAlign: 'middle',
align: 'center',
floating: false,
text: '<b>300</b><br>Total Issues',
style: {
fontSize: '30px'
}
},
plotOptions: {
pie: {
innerSize: '70%',
shadow: false,
showInLegend: true,
dataLabels: {
enabled: false,
}
}
},
legend: {
enabled: true,
floating: true,
borderWidth: 0,
align: 'right',
layout: 'vertical',
verticalAlign: 'middle',
useHTML: true,
labelFormatter: function () {
console.log("this: is equal to ");
console.log(this);
return 'custom word';
}
}
,
series: [
{
data: [
{
name: "a",
y: 100
},
{
name: "b",
y: 20
},
{
name: "c",
y: 50
}
]
}
]
}
};
I expected 'custom word' instead 'a','b','c' is showing

It seems when using node-export-server as a module callback functions are not supported. Check this thread on the module github: https://github.com/highcharts/node-export-server/issues/122.
As a workaround, you can use labelFormat property instead of labelFormatter:
legend: {
enabled: true,
floating: true,
borderWidth: 0,
align: 'right',
layout: 'vertical',
verticalAlign: 'middle',
useHTML: true,
labelFormat: "custom word"
}

Related

ChartJS label font size is scaled up and squeezed together

I have a nodejs app which is generating chartjs diagram images. In local the label is fine it looks like this:
But when I deploy exactly the same code to azure it looks like the label is scaled up and jammed.
My dependencies are "dependencies": { "chart.js": "2.7.3", "chartjs-node-canvas": "3.2.0"} and this is my chart config:
options: {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
enabled: false
},
animation: {
duration: 0
},
elements: {
line: {
cubicInterpolationMode: 'monotone'
}
},
scales: {
xAxes: [{
type: 'linear',
display: true,
ticks: {
autoSkip: true,
fontColor: gray,
fontSize: 14,
maxRotation: 0,
min: 0,
minRotation: 0,
padding: 10
},
gridLines: {
color: 'transparent',
lineWidth: 0,
drawTicks: false,
zeroLineColor: gray,
zeroLineWidth: 2
},
scaleLabel: {
display: true,
labelString: xLabel,
fontColor: gray,
fontSize: 14
}
}],
yAxes: [{
display: true,
id: this.yAxisId,
position: 'left',
ticks,
gridLines: {
color: transparentGray,
lineWidth: 1,
drawTicks: false,
zeroLineColor: gray,
zeroLineWidth: 2
},
scaleLabel: {
display: true,
labelString: yLabel,
fontColor: gray,
fontSize: 14
}
}]
}
Something is wrong with my options and then why it works perfectly fine on local?

Aligning labels in highchart donut

I'm trying to make a highchart donut with a legend on the side,
I'm really struggling to get the data labels to be more centered. At the moment each of them are in a different place,
an image of intended result:
https://codepen.io/mattdavidson/pen/qgqZyV
Highcharts.chart('container', {
credits: { enabled: false },
chart: { height: 300, width: 500, animation: false },
title: {
align: 'center',
verticalAlign: 'middle',
text: 10,
y: 25,
x: 55,
style: { color: '#333333', fontSize: '72px', fontWeight:'bold'},
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '{point.y}',
distance: -25,
style: { fontSize: '32px', textOutline: 0 },
},
animation: false,
showInLegend: true,
},
},
legend: {
layout: 'vertical',
verticalAlign: 'middle',
align: 'left',
symbolHeight: 25,
symbolRadius: 5,
itemMarginTop: 10,
itemMarginBottom: 10,
},
series: [
{
type: 'pie',
innerSize: '55%',
colors: ['rgb(212,33,71)', 'rgb(250,189,43)', 'rgb(60,168,74)'],
data: [['Category 1', 4], ['Category 2', 5], ['Category 3', 1]],
},
],
});
There is an issue reported on Highcharts github about donut labels position. Check it here: https://github.com/highcharts/highcharts/issues/9005.
I've changed some options and added custom text using Highcharts.SVGRenderer#text (dynamic sum of all values) on the donut center. Perhaps it will help you: https://jsfiddle.net/BlackLabel/2jmqext9/.
Code:
Highcharts.chart('container', {
credits: {
enabled: false
},
chart: {
height: 300,
width: 500,
animation: false,
events: {
load: function() {
var chart = this,
offsetLeft = -20,
offsetTop = 10,
x = chart.plotLeft + chart.plotWidth / 2 + offsetLeft,
y = chart.plotTop + chart.plotHeight / 2 + offsetTop,
value = 0;
chart.series[0].yData.forEach(function(point) {
value += point;
});
chart.renderer.text(value, x, y).add().css({
fontSize: '30px'
}).toFront();
}
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
color: '#fff',
format: '{point.y}',
distance: -25,
style: {
fontSize: '20px',
textOutline: 0
},
},
animation: false,
showInLegend: true,
},
},
legend: {
layout: 'vertical',
verticalAlign: 'middle',
align: 'left',
symbolHeight: 15,
symbolRadius: 5,
symbolPadding: 10,
itemMarginTop: 10,
itemMarginBottom: 10,
itemStyle: {
fontSize: '15px'
}
},
series: [{
type: 'pie',
innerSize: '55%',
colors: ['rgb(212,33,71)', 'rgb(250,189,43)', 'rgb(60,168,74)'],
data: [
['Category 1', 4],
['Category 2', 2],
['Category 3', 12]
],
}, ],
});

ext js 4 layout

this is code and link on screenshot
Ext.define('SD.view.SDDetail', {
extend: 'Ext.window.Window',
alias: 'widget.sddetail',
title: "Создание заявки",
height: 620,
width: 850,
layout: 'fit',
border: false,
modal: true,
isDemandReadOnly: false,
changeStatusOnly: false,
initComponent: function () {
var me = this;
var user = TR.user;
var f = new Ext.form.FormPanel({
xtype: 'form',
labelWidth: 60
, frame: true
, items: [{
fieldLabel: 'Text'
, xtype: 'textfield'
, anchor: '-18'
}, {
layout: 'column'
, defaults: {
columnWidth: 0.5
//, layout: 'form'
, border: false
, xtype: 'panel'
, bodyStyle: 'padding:0 18px 0 0'
}
, items: [{
defaults: { anchor: '100%' }
, items: [{
xtype: 'combo'
, fieldLabel: 'Combo 1'
, store: ['Item 1', 'Item 2']
}, {
xtype: 'datefield'
, fieldLabel: 'Date'
}]
}, {
defaults: { anchor: '100%' }
, items: [{
xtype: 'combo'
, fieldLabel: 'Combo 2'
, store: ['Item 1', 'Item 2']
}, {
xtype: 'timefield'
, fieldLabel: 'Time'
}]
}]
}, {
fieldLabel: 'Text Area'
, xtype: 'textarea'
, anchor: '-18 -80'
}]
});
this.items = [f];
this.tbar = {
xtype: 'toolbar',
height: 27,
items: [
{
xtype: "tbspacer"
}, "-", {
xtype: "tbspacer"
},
{
text: "Прикрепленные файлы",
icon: "Content/images/btnAttach.gif",
disabled: true,
handler: function (btn, e) { ShowAttachments(r.id, true, me.isDemandReadOnly); }
}, "-", {
xtype: "tbspacer"
}, {
text: "История статусов",
icon: "Content/images/btnHistory.gif",
disabled: true,
handler: function (btn, e) { ShowStatusesHistory(r.id, true); }
}, "-", {
xtype: "tbspacer"
}, {
text: "Информация по сопроводительной карточке",
icon: "Content/images/btnComplect.gif",
disabled: true,
handler: function (btn, e) { ShowComponents(r.id, true, me.isDemandReadOnly); }
}, "-", {
icon: "Content/images/btnPrint.gif",
text: "Сопроводительная карточка изделия",
disabled: true,
handler: function (btn, e) { DemandCardForm(r.id); }
}
]
};
this.buttons = [
{
text: "Сохранить",
action: 'save'
, disabled: me.isDemandReadOnly || user.SdUserViewOnly
}, {
xtype: "button",
text: "Отмена",
handler: function (btn, e) {
me.close();
}
}
];
// me.on('show', function () {
// me.down('kontragentcombo').focus(false, 250);
// });
me.callParent(arguments);
}
http://s002.radikal.ru/i198/1208/e2/7a153ca9b116.jpg
when i uncomment layout: 'form' i have error
namespace is undefined
[Прерывать на этой ошибке]
if (namespace === from || namespace.substring(0, from.length) === from) {
i whant this http://i032.radikal.ru/1208/51/e9b8ba1c1f30.jpg
but have error, what i must do?
layout is not defined in the items of the panel. It's part of the panel's properties (see the docs: Form Panel). Put it before the items.
As a suggestion - it would be easier to see it if your lines had consistent comma layout.

jqplot - Limiting point labels displayed to just 1 series

using jqPlot, is it possible to limit the point labels to just one series? See screenshot below! What I would like displayed is just the values above the "Actual" bar. The "mean" and "Planned" should'nt display!
Thanks!
Here's my code
<script type="text/javascript">
$(document).ready(function () {
$.jqplot.config.enablePlugins = true;
var trendline = [60000, 70000, 110000, 80000];
var planned = [70000, 90000, 120000, 100000,];
var actual = [80000, 80000, 150000, 120000];
var xAxis = ['Jan', 'Feb', 'Mar', 'Apr'];
$(function() {
$.jqplot('chartDiv', [planned, actual, trendline], BarChart());
});
function BarChart()
{
var optionsObj = {
title: '',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: xAxis,
},
yaxis: {
tickOptions: { showMark: false, formatString: "%'d" },
},
},
legend: {
show: true,
},
grid: {
borderColor: "#dad5d1",
background: "#dad5d1",
drawGridlines: false,
shadow: false
},
series: [
{label:'Planned',renderer:$.jqplot.BarRenderer},
{label: 'Actual',renderer:$.jqplot.BarRenderer},
{label: 'Mean',
pointLabels: {
show: true,
},
renderer:$.jqplot.LineRenderer,
lineWidth:4,
markerOptions:{
color: "#d87d12",
size:12,
}}
],
seriesColors: [ "#ada195", "#4a4541", "#ff9619"],
seriesDefaults:{
shadow: false,
rendererOptions:{
barPadding: 0,
barMargin: 10,
barWidth: 25
}
},
};
return optionsObj;
}
});
</script>
This actually looks like a bug in the point labels plugin. You can work around it by disabling the values in the seriesDefault (show:false) and then turning them on for the series you desire:
series: [
{label:'Planned',renderer:$.jqplot.BarRenderer},
{label: 'Actual',renderer:$.jqplot.BarRenderer},
{label: 'Mean',
pointLabels: {
show: true,
},
renderer:$.jqplot.LineRenderer,
lineWidth:4,
markerOptions:{
color: "#d87d12",
size:12,
}}
],
seriesDefaults:{
pointLabels:{show:false},
shadow: false,
rendererOptions:{
barPadding: 0,
barMargin: 10,
barWidth: 25
}
},

ExtJS Advanced Fluid Border Layout

I need to create an advanced, fluid Border layout for our Report system.
The West pane would be split into 2 separate panes, top for the filter form, and the bottom for navigation.
The Center pane would be split into 3 separate panes, top for the primary data grid, and 2 bottom panes for sub report grids. I may at some point need 3 bottom panes, but I'm hoping to avoid that.
Here is an example of what I am looking for: http://dl.dropbox.com/u/298258/Amistaff/desiredLayout.png
What I have so far is definitely less than satisfactory.
http://dl.dropbox.com/u/298258/Amistaff/currentLayout.png
Here is the code:
var ReportForm = new Ext.FormPanel({
url: '',
frame: false,
border: false,
title: 'Filter Results',
width: 260,
labelWidth: 50,
padding: '10 0 0 5',
standardSubmit: true,
items: [
{
fieldLabel: 'Client',
hiddenName: 'ClientID',
mode: 'local',
store: frmClientStore,
displayField: 'CompanyName',
valueField: 'ClientID',
width: 150,
editable: true,
triggerAction: 'all',
xtype: 'combo'
}
],
buttons: [
{text:'Export',handler:function(){}},
{text:'Search',handler:function(){}},
{text:'Reset',handler:function(){}}
]
});
var ReportGrid = new Ext.grid.GridPanel({
id: 'ReportGrid',
width: '100%',
height: '50%',
viewConfig: {
forceFit: true
},
autoHeight: true,
loadMask: true,
stripeRows: true,
store: ReportStore,
margins: '5 5 5 5',
cm: ReportColumnModel
,bbar: new Ext.PagingToolbar
(
{
pageSize: 10,
store: ReportStore,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}'
}
)
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'west',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
width: 260,
minSize: 175,
maxSize: 400,
margins: '5 5 5 5',
items: [
ReportForm,
{
region: 'south',
title: 'Superuser',
border: false,
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title: 'General',
xtype: 'panel',
height: 200,
html: '',
},
{
title: 'Exams',
height: 200,
html: ''
}
]
}
]
},
new Ext.Panel({
region: 'center',
deferredRender: false,
layout: 'fit',
margins: '5 5 5 0',
items: [
ReportGrid,
new Ext.Panel({
region: 'south',
border: false,
height: '50%',
html: 'foo',
layout: 'fit',
items: [
new Ext.Panel({
region: 'west',
width: '50%',
border: false,
html: 'West'
}),
new Ext.Panel({
region: 'east',
width: '50%',
border: false,
html: 'East'
})
]
})
]
})
]
});
Thanks...
EDIT:
Many thanks to amol for the answer below. I have one additional question. If I collapse the form in the west region, how do I make it resize the navigation panel to fill the remaining space?
code -
var ReportForm = new Ext.FormPanel({
url: '',
frame: false,
border: false,
title: 'Filter Results',
width: 260,
labelWidth: 50,
padding: '10 0 0 5',
standardSubmit: true,
items: [
{
fieldLabel: 'Client',
hiddenName: 'ClientID',
mode: 'local',
//store: frmClientStore,
displayField: 'CompanyName',
valueField: 'ClientID',
width: 150,
editable: true,
triggerAction: 'all',
xtype: 'combo'
}
],
buttons: [
{text:'Export',handler:function(){}},
{text:'Search',handler:function(){}},
{text:'Reset',handler:function(){}}
]
});
var ReportGrid = new Ext.grid.GridPanel({
id: 'ReportGrid',
flex:1,
viewConfig: {
forceFit: true
},
loadMask: true,
stripeRows: true,
//store: ReportStore,
margins: '5 5 5 5',
cm: new Ext.grid.ColumnModel({
columns:[
{header:'A column', dataIndex:'afield'},
{header:'B column', dataIndex:'bfield'}
]
}),
store:new Ext.data.ArrayStore({
autoLoad:true,
fields:['afield', 'bfield'],
data:[['value 1','value 3'],['value 2', 'value4']]
}),
bbar: new Ext.PagingToolbar
(
{
pageSize: 10,
//store: ReportStore,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}'
}
)
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'west',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
width: 260,
minSize: 175,
maxSize: 400,
margins: '5 5 5 5',
items: [
ReportForm,
{
region: 'south',
title: 'Superuser',
border: false,
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title: 'General',
xtype: 'panel',
height: 200,
html: ''
},
{
title: 'Exams',
height: 200,
html: ''
}
]
}
]
},
new Ext.Panel({
region: 'center',
deferredRender: false,
layout: 'vbox',
layoutConfig:{align:'stretch'},
margins: '5 5 5 0',
items: [
ReportGrid,
{
border: false,
flex:1,
layout: 'hbox',
layoutConfig:{align:'stretch'},
defaults:{flex:1},
items: [
new Ext.Panel({
html: 'West'
}),
new Ext.Panel({
html: 'East'
})
]
}
]
})
]
});

Resources