I can't seem to figure out how to fix the header issue.
The TesterTitle Test header gets split in the middle of a word, is there a way to not split a word apart?
Or set a minimum width for a column?
https://jsfiddle.net/fdgxk60y/32/
I need to add code to this question to meet stackoverflows requirement...
startY: 20,
headerStyles: {fillColor: [51, 122, 183]},
theme: 'grid',
margin: {horizontal: 7},
styles: {overflow: 'linebreak'},
columnStyles: {text: {columnWidth: 'auto'}},
Although you can't specify min width, you can specify width. Does this fit your requirement?
columnStyles: {text: {columnWidth: 'auto'}, longTitle: {columnWidth: 100}}
or
columnStyles: {text: {columnWidth: 'auto'}, longTitle: {columnWidth: 'wrap'}}
or
styles: {columnWidth: 'wrap'}
columnStyles: {text: {columnWidth: 'auto'}}`
I had the same issue and fixed it just by using the following headStyle:
headStyles: { cellWidth: 'wrap' },
Example:
autoTable(
doc, {
headStyles: {
cellWidth: 'wrap'
},
columns,
body
})
Here are other styles that you can play with: https://github.com/simonbengtsson/jsPDF-AutoTable#styling-options
Related
document.autoTable({
head,
body,
startY: XX,
styles: { lineColor: '#c7c7c7', lineWidth: 0, cellPadding: 2, font: 'Helvetica' },
headStyles: { fillColor: '#ffffff', textColor: '#333333', font: 'Helvetica' },
bodyStyles: { fillColor: '#f5f5f5', textColor: '#333333', fontSize: 7, lineColor: '#c7c7c7', lineWidth: 0 }
});
head am passing as below:
const head = [{
content: "طيران الإمارات",
styles: { valign: 'centre', cellPadding: {top: 3}, fontSize: 9, fontStyle: 'bold', cellWidth: 110.6 },
},
{
content: 'Miles',
styles: { fontSize: 9, fontStyle: 'normal', valign: 'centre', cellWidth: 35 },
},
{
content: 'Tier Miles',
styles: { fontSize: 9, fontStyle: 'normal', valign: 'centre', cellWidth: 35 },
}
];
with Helvetica Font, Head Text showing as special characters.
Special Characters
With Custom font Its showing in Arabic but word is breaking
I have passed as header this "طيران الإمارات" but in pdf its showing as this طير لإما Breaking word
headStyles: { fillColor: '#bde4d1', textColor: '#333333' , fontStyle: 'Amiri' }
you have to add fontStyle in headStyles object
Go to google fonts and download Amiri font ( I have tried other Arabic fonts but they did not work for some reason).
Go to this converter tool to convert your font to base64 and download the generated JavaScript file (When converting your Amiri font, upload one .ttf file per time and not the full .zip folder, otherwise you will get an error. If you want to add more font variants upload and add them separately).
Go to your project and import the downloaded file (or add the script tag manually if you do not use modules).
import "./fonts/Amiri";
// .... here goes your code working with the table.
If you use jspdf-autotable library add the following code to its configs:
const jsPDFDoc = new jsPDF();
jsPDFDoc.autoTable({
html: "#my-table",
useCss: true,
theme: "grid",
headStyles: { font: "Amiri" }, // For Arabic text in the table head
bodyStyles: { font: "Amiri" }, // For Arabic text in the table body
});
Full example with autotable would look like this:
import { jsPDF } from "jspdf";
import "jspdf-autotable";
import "../../../fonts/Amiri";
const jsPDFDoc = new jsPDF();
jsPDFDoc.autoTable({
html: "#my-table",
useCss: true,
theme: "grid",
headStyles: { font: "Amiri" },
bodyStyles: { font: "Amiri" },
});
I tried to export 15 columns with jsPDF autoTable, but the exported table layout is not readable. How can we achieve it?
In my case I had 10 columns and I changed pdf orientation to 'landscape' and styles. Also, if you have long text in columns you need to enable overflow: 'linebreak'.
Here some code example:
const doc = new jsPDF({ orientation: 'landscape' });
doc.text('Transitions', 5, 12);
doc.autoTable({
showHead: 'firstPage',
columns: // your columns,
body: // your rows,
startY: 18,
styles: { overflow: 'linebreak', cellWidth: 'wrap', cellPadding: 1, fontSize: 6 },
columnStyles: { text: { cellWidth: 'auto' } }
});
if you need to use linebreak for specific column:
doc.autoTable({
showHead: 'firstPage',
columns: // your columns,
body: // your rows,
startY: 18,
styles: { overflow: 'linebreak', cellWidth: 'wrap', cellPadding: 1, fontSize: 6 },
columnStyles: {
someColumnName1: { cellWidth: 'auto' },
someColumnName2: { cellWidth: 'auto' }
}
});
someColumnName1 - this is dataKey from columns.
Please provide your code or jsfiddle, so we can provide better solution.
Using the sample provided by highcharts (less some data for easier visability) https://jsfiddle.net/mevbg82z/2/
I'm trying to make the bubble labels ('USA', 'Canada', 'Mexico', 'Brazil') bigger.
I've looked at the series API for packedbubble but haven't found a way to increase the size of the text in the bubbles through options https://api.highcharts.com/highcharts/series.packedbubble
The only way I've found to do this is to write css, which doesn't handle scaling, doesn't center up, and generally seems hacky...
.highcharts-data-label text tspan {
font-size: 24px
}
Whats the correct way to increase the size of these labels?
Looks like you can set fontSize inside plotOptions.packedbubble.dataLabels
plotOptions: {
packedbubble: {
minSize: '20%',
maxSize: '100%',
zMin: 0,
zMax: 1000,
layoutAlgorithm: {
gravitationalConstant: 0.05,
splitSeries: true,
seriesInteraction: false,
dragBetweenSeries: true,
parentNodeLimit: true
},
dataLabels: {
enabled: true,
format: '{point.name}',
filter: {
property: 'y',
operator: '>',
value: 250
},
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal',
fontSize: '24px'
}
}
}
},
I'm using jspdf-autotable on angular 4.
The line width is wrong when there is an overflow of content. I will like to use long content on my table but the breakline doesn't work right. What can i do????
There is my source code
doc.autoTable(colonnes, rows, {
theme: 'striped',
styles: {
fillColor: [10, 10, 20],
overflow: 'linebreak',
fontSize: 15,
rowHeight: 20,
columnWidth: 'wrap',
theme: 'striped',// 'striped', 'grid' or 'plain'
startY: false, // false (indicates margin top value) or a number
pageBreak: 'auto', // 'auto', 'avoid' or 'always'
tableWidth: 'wrap', // 'auto', 'wrap' or a number,
showHeader: 'firstPage', // 'everyPage', 'firstPage', 'never',
tableLineColor: 200, // number, array (see color section below)
tableLineWidth: 2,
},
tableWidth: 'auto',
columnWidth: 'auto',
columnStyles: {
id: {fillColor: [15, 15,25]},
//1: {columnWidth: 'auto'},
columnWidth: 'wrap',
},
headerStyles: {theme: 'striped'},
margin: {top: 60},
addPageContent: function(data) {
doc.text(nom + ' Nombre Total : ' + rows.length, 150, 40);
/*fontSize: 25;
fontFamily: 'vivaldi';*/
}
});
doc.save(nom+now+'.pdf');
In columnStyles add 'overflow: '
Possible values for overflow:
overflow: 'linebreak'|'ellipsize'|'visible'|'hidden' = 'normal'
columnStyles = {
columnId: {
overflow: 'ellipsize'
}
}
I have text on a chart like below. I want to change the font size of the text "abc". I tried putting 'font-size':'8px' inside of the css, but it did not work. Does anyone have an idea about this?
Here is the fiddle link:
http://jsfiddle.net/3hGz2/
'events': {
'load': function () {
var label = this['renderer']['label']('* y='+ slope +'x'+'+('+ intercept + ')<br> R^2='+ rSquare)
.css({
'width': '150px',
'color' : 'grey',
'font-size':'8px'
})
.attr({
'stroke': 'grey',
'stroke-width': 0,
'r': 5,
'padding': 3
})
.add();
label.align(Highcharts.extend(['label']['getBBox()'], {
'align': 'right',
'x': -110, // offset
'verticalAlign': 'bottom',
'y': -130 // offset
}), null, 'spacingBox');
}
}
See http://jsfiddle.net/3hGz2/1/
you can specify the font size as fontSize
.css({
'width': '150px',
'color' : 'grey',
'fontSize':'20px'
})