I am using docxjs to automatically generate a docx file. I have an image that I want to use as a footer of the document, however, no matter what I try, the image does not stay at the bottom. It is located in the footer but the footer has some empty lines at the bottom, after the image. How do I make the image stay on the bottom of the footer? This is my code as of now:
footers: {
default: new Footer({
children: [
new Paragraph({
children: [
new ImageRun({
data: readFileSync("./res/footer.png"),
transformation: {
width: 801,
height: 95,
},
floating: {
horizontalPosition: {
relative: HorizontalPositionRelativeFrom.LEFT_MARGIN,
offset: 0,
},
verticalPosition: {
relative: VerticalPositionRelativeFrom.BOTTOM_MARGIN,
offset: 0,
},
wrap: {
type: TextWrappingType.SQUARE,
side: TextWrappingSide.BOTH_SIDES,
},
margins: {
top: 0,
bottom: 0,
},
},
}),
],
}),
],
}),
},
Image dimensions: 801 x 95
Related
Using Chart.js version 4.2.0, I try to display a chart on a maximized window on Windows 11 where height of chart is 100% of screen's height and width of chart is 80% of screen's width.
I tried with following code
<body>
<div height="100%" width="80%">
<canvas id="canvas">
But this simple attributes don't do the job.
Finally, I have found this solution
<body>
<div>
<canvas id="canvas">
</canvas>
</div>
, options:
{ responsive: true
, maintainAspectRatio: true
, aspectRatio: 1.65
var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, config);
myChart.canvas.parentNode.style.width = '80%';
This works correctly but is a little tricky because width (not height) is set dynamically in Javascript code and aspectRatio must be manually fixed in options.
Is there a simple solution to define width to 80% of screen and height to 100% of screen ?
My current screen size are 1920x1080.
What I obtain is
When I suppress aspectRatio in options, I obtains following chart
It seems that the standard way for a chart.js plot to fill a certain area with a size set in css, is to do these:
include the canvas in a div that doesn't contain anything else
set the size in the style of the div, not the canvas (that is already done in your code)
have at least one size in absolute units, (that is not both in %) - in your case
<div style="height:100vh; width:80vw">
<canvas id="myChart"></canvas>
</div>
See also this comment from the docs.
set chart options maintainAspectRatio: false and responsive: true - the latter for the chart to be redrawn when you resize the window.
Here's a code snippet doing these, including a plugin I wrote that displays the current sizes of the canvas, div and window
const plugin = {
id: 'canvasSizeMonitor',
currentWidth: 0,
currentHeight: 0,
resizing: false,
displaySizes(chart){
const canvas = chart.canvas,
div = canvas.parentElement;
document.querySelector('#sizes').innerText+=
`div: ${div.offsetWidth}x${div.offsetHeight}\n`+
`canvas: ${canvas.offsetWidth}x${canvas.offsetHeight}\n`+
`window:${window.innerWidth}x${window.innerHeight}\n`+
`0.8 * ${window.innerWidth} = ${Math.round(0.8*window.innerWidth)}\n`+
'---------\n'//`aspRatio: ${chart.options.aspectRatio.toFixed(3).replace(/[.]?0*$/, '')}\n\n`;
},
afterRender(chart){
if(!plugin.resizing &&
(chart.canvas.offsetWidth !== plugin.currentWidth ||
chart.canvas.offsetHeight !== plugin.currentHeight)){
plugin.resizing = true;
setTimeout(
function(){
plugin.resizing = false;
plugin.currentWidth = chart.canvas.offsetWidth;
plugin.currentHeight = chart.canvas.offsetHeight;
plugin.displaySizes(chart);
}, 500
)
}
}
};
chart = new Chart(document.getElementById("myChart"), {
type: 'line',
data: {
datasets: Array.from({length: 8}, (_, i)=>({
label: `k = ${i+1}`,
data: Array.from({length: 100}, (_, j)=>({
x: j/50, y: Math.exp(-j/10)*Math.cos((i+1)*j*Math.PI/100)
}))
}))
},
options: {
parsing: {
xAxisKey: 'x',
yAxisKey: 'y'
},
pointStyle: false,
borderWidth: 1,
responsive: true,
maintainAspectRatio: false,
//aspectRatio: 1,
scales: {
x: {
type: 'linear',
grid: {
drawOnChartArea: true,
lineWidth: 1
},
border:{
color: '#000',
},
ticks: {
display: true,
color: '#000',
padding: 10
},
title: {
display: true,
text: 'x',
align: 'end'
}
},
y: {
type: 'linear',
ticks: {
padding: 10,
color: '#000',
},
grid: {
drawOnChartArea: true,
lineWidth: 1
},
border:{
color: '#000',
},
title: {
display: true,
text: 'f[k](x)',
align: 'end'
}
}
},
plugins:{
legend:{
position: 'right'
}
},
animation: {duration: 0}
},
plugins: [plugin]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"
integrity="sha512-t41WshQCxr9T3SWH3DBZoDnAT9gfVLtQS+NKO60fdAwScoB37rXtdxT/oKe986G0BFnP4mtGzXxuYpHrMoMJLA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body style="margin: 0">
<pre id="sizes" style="position: absolute; top: 0; right: 10px; text-align: right;background-color:rgba(255, 200, 100,0.4)"></pre>
<div style="height:100vh; width:80vw; padding:0; margin: 0; background: red">
<canvas style="background: #ddd" id="myChart"></canvas>
</div>
</body>
I am using chart.js to show a line chart in an Angular component. The code does not have any padding or margins added for the chart. I added styling to set the padding and margin to zero both in the create the chart in the .ts file and in the style sheets and nothing makes any difference. When I inspect the element in Chrome developer mode it does not show any padding or margins, so I think the styling is internal to chart.js. Below is a screenshot with the chart element highlighted in Chrome developer mode.
As you can see, there is a margin or border on the left, bottom and right of the chart canvas element, but strangely not at the top. The spacing between the Y-Axis labels and the left of the chart are especially bad when viewed on a mobile phone so I really need to remove it. I have spent hours setting every element I can think of to have 0 padding and 0 margins and trying different changes to the code and style sheets and searching through other articles on the Internet including Stackoverflow but none of them seem to answer this specific question.
I also tried adding box-sizing:border-box; to the div container containing the chart but it did not make any difference, i.e. as suggested in this article:
Why is chart.js canvas not respecting the padding of the container element?
Here is my chart configuration:
this.myChart = new Chart("chartCanvas", {
type: 'line',
data: {
labels: labelVars,
datasets: datasets
},
options: {
elements: {
point: {
radius: 0
},
},
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'index',
intersect: false,
enabled: width > 640
},
hover: {
mode: 'nearest',
intersect: true
},
legend: {
display: false,
position: 'bottom',
labels: {
}
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'week',
tooltipFormat: 'MM/DD/YYYY'
},
display: true,
scaleLabel: {
display: true,
labelString: ''
},
ticks: {
autoSkip: true,
padding: 0,
maxTicksLimit: this.getTickLimit(),
maxRotation: this.getRotation(),
minRotation: this.getRotation()
},
gridLines: {
display: false,
offsetGridLines: true
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
},
ticks: {
maxTicksLimit: 6,
beginAtZero: false
}
}]
}
}
});
Here is the current html:
<div class="chartContainer">
<canvas *ngIf="displayChart" id="chartCanvas"></canvas>
</div>
And here is the current css:
#chartCanvas {
padding-left: 0;
margin-left: 0;
}
.chartContainer {
height: 500px;
margin: 0;
padding: 0;
align-items: left;
align-self: left;
align-content: left;
}
Has anyone else encountered this problem?
I found the problem. I had the scaleLabel turned on but was not showing a scale label, which was adding extra space. I changed scaleLabel display to false as shown below and the space went away:
yAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: ''
},
Depending on your chartjs config, you just have to set the padding of the chart.js config.
Info: Offset's in the canvas cannot be altered with css, since the chart is "drawn" on it.
(details: in the documentation)
For a example:
const config = {
type: 'line',
data: data,
options: {
...
plugins: {
....
},
scales:{
x: {
ticks:{ padding:0 }
}
},
}
};
i'm using highcharts for genetating graphs, problem is, highcharts is generating space between border and content of Tooltip and labels of the Pie diagram is visible between that generated space.
can any has solving for my problem.
Please check with below example.
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'graf1',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
margin: 40,
text: 'Podíl všech potřeb'
},
tooltip: {
borderWidth: 1,
backgroundColor: "rgba(255,255,255,0)",
borderRadius: 0,
shadow: false,
useHTML: true,
percentageDecimals: 2,
backgroundColor: "rgba(255,255,255,1)",
formatter: function () {
return '<div class="tooltop">'+this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
zIndex: 1,
enabled: true,
color: '#000000',
connectorWidth: 2,
useHTML: true,
formatter: function () {
return '<span style="color:' + this.point.color + '"><b>' + this.point.name + '</b></span>';
}
}
}
},
series: [{
type: 'pie',
name: 'Potřeba',
data: [
['Firefox', 45.0],
['IE', 26.8], {
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}, ['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
.label {
z-index: 1!important;
}
.highcharts-tooltip span {
background-color:white;
border:1px solid green;
opacity:1;
z-index:9999!important;
}
.tooltip {
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="graf1" style="width: 400px; height: 250px; float:left"></div>
tooltip space between order and content highcharts
SVG tooltip elements can be hidden through:
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
Example: http://jsfiddle.net/x8Lq0yr9/1/
This will eliminate the space between border and HTML content.
you are using div class="tooltop" where as tooltop class is nowhere. Also, .highcharts-tooltip is used in highcharts at two places . one at datalables and second in tiiptip.
Unless you want specific border color , you can remove that css class from your code and tooltip loks good.
.tooltipSpan {
opacity:1;
z-index:9999!important;
width:100%;
}
See this Fiddle
Highcharts creates these using svg which makes it so the background shows up underneath certain elements. To avoid this undesired behavior the border and background settings have been turned off and all these are controlled, instead, using html in the formatter function. Using HTML makes it so the background does not show up underneath certain elements.
tooltip: {
backgroundColor: undefined,
borderColor: undefined,
borderWidth: 0,
}
Here is the output I require!
Here is how I try to achieve this:
win = Ext.create('Ext.window.Window', {
height: 650,
width: 500,
layout: 'fit',
border: false,
bodyPadding: 10,
modal:true,
itemId:'serviceCallWindow',
header: {
cls: 'n-service-call-window-header',
height: 80,
items:[{
xtype: 'component',
floating: true,
autoShow: true,
shadow: false,
focusOnToFront:false,
defaultAlign: 't',
autoEl: {
tag: 'img',
src: NG.serverMapPath('~/resources/images/support/support_icon.png')
},
componentCls: 'n-service-call-support-icon'
}]
},
items: [{
xtype: 'servicecall',
border: false,
bodyPadding: 10
}]
});
The challenge is to get the service call icon between the window header and body.
How can I achieve this?
This is achievable through manipulating CSS and the various layouts. You would perhaps also need to get rid of the header and actually make your own "close" button which would fire the windows close method.
such as below:
Ext.application({
name: 'Fiddle',
launch: function() {
win = Ext.create('Ext.window.Window', {
height: 300,
width: 500,
border: false,
bodyPadding: 10,
header: false,
modal: true,
layout: 'vbox',
itemId: 'serviceCallWindow',
items: [{
xtype: 'container',
/*layout: {
type: 'hbox',
pack: 'center'
},*/
width: '100%',
items: [{
xtype: 'image',
cls: 'testLogo',
style: {
margin: '0 auto',
width: '50px',
display: 'block'
},
src: 'http://placehold.it/50x50'
}, {
xtype: 'button',
cls: 'testClose',
style: {
top: 0,
right: 0,
position: 'absolute'
},
icon: 'http://placehold.it/20x20',
listeners: {
click: function() {
win.close();
}
}
}],
}, {
xtype: 'container',
border: false,
bodyPadding: 10,
html: 'this is the content of another container'
}]
});
win.show();
}
});
Demo: https://fiddle.sencha.com/#fiddle/g6t
this is my code:
Code:
{ xtype: 'tabpanel',
docked: 'top',
height: 752,
width: '100%',
activeItem: 1,
items: [
{
xtype: 'container',
title: 'MyCar',
items: [
{
xtype: 'container',
maxWidth: '100%',
width: '100%',
items: [
{
xtype: 'image',
docked: 'top',
height: 407,
html: '',
id: 'imgCar',
padding: '0 0 0 510',
style: 'margin: 0px auto; width: 50%;background-size: auto;',
src: 'http://localhost/car.jpg'
}
]
},
{
xtype: 'dataview',
height: 297,
html: ' <table id="tableConsumptions"> <tr> <td id="consumptionsCol">val</td></tr> </table>',
width: '100%',
itemTpl: [
''
]
}
]
},
{
I have an image container, and I would like to adapt the image dimension to the screen dimension, scaling it.
How is it possible?
Thanks in advance.
You can try using this function to fetch the height and width of the Viewport.
Ext.viewport.getWindowHeight( );
Ext.viewport.getWindowWidth( );
for those who might stumbled on this...
most important thing is the parent container of the image component need to be "fit" (card might also do) and we set the background-size styling of the image component to 100% (for width and height)
{
xtype: 'tabpanel',
docked: 'top',
height: 752,
width: '100%',
activeItem: 1,
items: [
{
xtype: 'container',
title: 'MyCar',
items: [
{
xtype: 'container',
layout: 'fit', //supposedly when we want our image to be the same size as its container without specifying width and height, we use this and set the background-size style of the image to 100% (for both width and height)
maxWidth: '100%',
width: '100%',
items: [
{
xtype: 'image',
docked: 'top',
height: 407,
html: '',
id: 'imgCar',
style: 'background-size: 100% 100% !important;', //the most important key is backgeound-size styling for the image as it will be set as background of a div (unless we use mode: 'img' config)
src: 'http://localhost/car.jpg'
}
]
},
{
xtype: 'dataview',
height: 297,
html: ' <table id="tableConsumptions"> <tr> <td id="consumptionsCol">val</td></tr> </table>',
width: '100%',
itemTpl: [
''
]
}
]
}
]
}