With KaTex I get the following view in a formula in display mode:
The label (1) overlaps with the formula.
In another page the same formula with the same KaTeX configuration renders correctly.
The only difference I am aware of is, that the bad display is rendered using KaTexs auto-render feature renderMathInElement using the options
{delimiters: [
{ left: "$$", right: "$$", display: true },
{ left: "$", right: "$", display: false },
{ left: "\\(", right: "\\)", display: false },
{ left: "\\[", right: "\\]", display: true },
],
// • rendering keys, e.g.:
throwOnError: false,
}
while the correct version is rendered on page load.
Is there any configuration that prints the labels correctly?
Related
I have used jspdf-html2canvas package in Angular 10 project for PDF download. Post deployment in safari browser the downloaded pdf bold font is not rendering proper. Also some of the pages shows alignment issues. Same code is working fine on local.
Package link: [https://www.npmjs.com/package/jspdf-html2canvas]
Issues:
Bold text is overlapping
text displayed with strong tag are not aligned
Error image reference
Below is the configuration I have used.
const opt = {
jsPDF: {
unit: 'px',
format: 'a4',
},
html2canvas: {
imageTimeout: 15000,
logging: true,
useCORS: true,
allowTaint: true,
quality: 2,
scale: 5,
},
imageType: 'image/jpeg',
imageQuality: 1,
margin: {
top: 50,
right: 20,
bottom: 32,
left: 20,
},
output: 'pdfFileName',
init: function () { }
}
I have a simple line chart with a legend aligned to the right. Legend width is set based on the legend item content, if the content doesn't exceed 25% of the width of the chart, it stays as it is. But if it exceeds - 25% is applied. The code for this is here.
The problem is that I am facing a situation when legend text has long string without white spaces in between - like PricewaterhouseCooper, the text gets cutoff - which is expected result based on the code. However I wanted to eliminate this scenario and let it exceed 25% if there is a string which width is wider than 25%. Do you have suggestion how better approach this problem?
Thanks!
My suggestion is using custom legend HTML to use custom styling for it. Highchart can be very strong at custom style for your chart.
I created this Fiddle for an example of it.
In my example, I used "min-width" and "max-width" based on percent of your container width. Also different "font-family" can cause a different results.
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>#import 'https://code.highcharts.com/css/highcharts.css';
#container {
min-width: 300px;
max-width: 500px;
height: 300px;
margin: 1em auto;
}
</style>
<div id="container"></div>
<script>
Highcharts.chart('container', {
chart: {
styledMode: true,
events: {
load: function() {
var chart = this,
legend = chart.legend,
legendMaxWidth =
Highcharts.relativeLength(legend.options.maxWidth, 1) * chart.chartWidth;
/*if (legend.legendWidth > legendMaxWidth) {
legend.update({
width: legend.options.maxWidth
});
}*/
}
}
},
legend: {
align: 'right',
layout: 'proximate',
maxWidth: '25%',
width: '25%',
/* use custom html */
useHTML: true,
labelFormatter: function () {
return '<span title="' + this.name + '" style="max-width:110px;min-width:75px;display:block;word-wrap: break-word;white-space: normal;letter-spacing: 0.5px;">' + this.name + '</span>';
}
},
series: [{
name: 'PricewaterhouseCoopers',
data: [1, 4, 3, 5],
},{
name: 'Pricewaterhouse Coopers copy',
data: [2, 1, 0, 3],
},
{
name: 'Deloitteverylongtexthere',
data: [3, 5, 3, 1],
}
]
});
</script>
When I hover on series, It shows perfect data but title in background is also visible.
See these images
Actual chart
Tooltip
Here is code link - https://jsfiddle.net/gkd/97mk583y/
tooltip & Title both are generated using useHTML: true
How can we make sure title doesn't appear in background of tooltip ?
opacity in background color is already 1.
Because both of this elements are outstanding HTML elements try to use this config rather than inline styling:
"tooltip": {
padding: 0,
"style": {
"color": "#FFFFFF"
},
"enabled": true,
"useHTML": true
},
And CSS:
.highcharts-tooltip>span {
padding: 10px;
margin: 0;
background-color: rgba(0, 0, 0, 1);
z-index: 9999 !important;
}
Demo: https://jsfiddle.net/BlackLabel/z5Lb1hmt/
Current Chart
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
labels: {
x : 25,
align: 'left'
}
},
My Script in here
http://jsfiddle.net/puff0211/dtcLn8sm/14/
Desired Chart
Does anyone know to accomplish this?
Thank you!
One of the solutions here is to slightly change the position of both axes via left property (it's not documented but it works) and create additional labels using SVG Renderer. chart.events.load is a good place for it because when it launches ticks values and positions are already computed - we can use them to create additional labels:
load: function() {
var ticks = this.xAxis[0].ticks,
renderer = this.renderer;
for (var prop in ticks) {
var t = ticks[prop];
if (t.label) {
var coords = t.label.xy,
label = renderer.text(t.pos + 1, coords.x - additionLabelsOffset, coords.y).add();
}
}
}
(...)
xAxis: {
left: axesOffset
(...)
},
yAxis: {
left: axesOffset
(...)
}
Live demo: http://jsfiddle.net/kkulig/cq2otgr1/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
My solution is simple.
Let chart margin keep width with left lable.(api use chart.margin)
Allow X Axis can display 2 lable. (api use useHTML and formatter )
Code:
chart: {
type: 'bar',
margin: [ 0, 0, 70, 70]
},
{...},
xAxis: {
labels: {
x : 0,
align: 'left',
useHTML: true,
formatter: function() {
return '<div style="position: relative; top: 0px; right: 50px"> No. '+ (this.pos + 1) +'</div>\
<div style="position: absolute; top: 0px; left: 20px"><b>'+ this.value +'</div>';
}
}
Live demo: http://jsfiddle.net/puff0211/pv84nLub/
API Reference:
https://api.highcharts.com/highcharts/chart.margin
https://api.highcharts.com/highcharts/xAxis.labels.useHTML
https://api.highcharts.com/highcharts/xAxis.labels.formatter
I thought it would be fun to check Sproutcore out, but I ran into an error which I cannot seem to figure out. I'm following the recent NetTuts+ tutorial on writing a microblog with the framework. My code is the following:
Microblog.mainPage = SC.Page.design({
mainPane: SC.MainPane.design({
childViews: 'topView postView contentView'.w(),
topView: SC.ToolbarView.design({
childViews: 'appName'.w(),
layout: { top: 0, left: 0, right: 0, height: 40 },
anchorLocation: SC.ANCHOR_TOP,
appName: SC.LabelView.design({
layout: { top: 5, left: 5, width: 100 },
displayValue: "MicroBlog App",
layerId: "mb-logo" // html id attribute
})
}),
postView: SC.View.design({
childViews: 'form'.w(),
layout: { top: 40, height: 75 },
backgroundColor: 'white',
form: SC.View.design({
childViews: 'postContent post'.w(),
layout: { left: 200, right: 200 },
postContent: SC.TextFieldView.design({
layout: { top: 10, left: 10, right: 10, height: 60 },
isTextArea: YES,
hint: "What's on your mind?"
}),
post: SC.ButtonView.design({
layout: { top: 80, right: 10, width: 100 },
title: "Post",
isDefault: YES
})
})
}),
contentView: SC.ScrollView.design({
hasHorizontalScroller: NO,
layout: { top: 135, bottom: 0, left: 0, right: 0 },
contentView: SC.ListView.design({
})
})
})
});
However, for some reason it doesn't load the button and when I click on the page where either my buttonView or contentView goes, I get the following error in my console:
Uncaught TypeError: Cannot call method 'get' of null
I tried googling for it, but no luck. I'm using Sproutcore 1.6.
Thanks
The NetTuts sproutcore app is built on sproutcore 1.4
Sproutcore changes quite significantly between versions. I would assume this is your problem.
Apparently the problem lies in the last part:
contentView: SC.ScrollView.design({
hasHorizontalScroller: NO,
layout: { top: 135, bottom: 0, left: 0, right: 0 },
contentView: SC.ListView.design({
})
})
For some reason, those two views can't have the same name. I changed this to:
contentView: SC.ScrollView.design({
childViews: 'contentListView'.w(), // do i need this here?
hasHorizontalScroller: NO,
layout: { top: 150, bottom: 0, left: 0, right: 0 },
contentListView: SC.ListView.design({
})
})
Seems to work fine now!
You've already solved this problem, but: The error "Cannot call method 'get' of null" in SproutCore is pretty unhelpful on its face, but it usually means there's either a syntax error in the code, or something else is missing in the declaration of, the object you're trying to call get() on. In your case, I think adding the childViews attribute helped, and disambiguating the contentView label was also necessary.