I am using Extjs 5 for generating a chart.
I have added a sprite text to the chart, but I am unable to wrap the text for long string values.
The issue is shown in the image.
Here is the code for sprite.
sprites: [{
type: 'text',
text: '',
textAlign: 'left',
fontSize: 12,
fontWeight: 'bold',
//width: 50,
//height: 30,
x: 100,
y: 10,
'fill': '#333f49'
}],
I am setting the text value dynamically from controller.
Is there any way I can wrap the text to next line for long string values?
Thanks in advance. :)
The text sprite doesn't auto-wrap. But it does take into account line breaks. So what you need to do is insert line breaks yourself.
You can use the Ext.util.TextMetrics class to determine how long the text is, and then find a suitable whitespace character to replace with a new line.
Related
Jspreadsheet v4.9.0 change the data type of cell to text.
Column type is numeric, requirement is for some cells in that column need to change data type to text.
Locale settings causes problem when alphanumeric value is populated in cell, when it is removed it works as expected. But locale was set for digit separator
{ title: 'Amount (In crore)', name: 'AMOUNT', width: 150, type: 'numeric', locale: 'en-IN', align: 'right' }
is it possible to have both by removing the locale settings for specific cell alone
My Y-Axis keys (or ticks) are pretty long, and they're being truncated
But it's not due to lack of sufficient width for the graph itself, using the inspect tool, I can see there's enough space allocated for it, but the frame that is allocated to the whole graph is not sufficient... and that's supposed to be the ResponsiveBar...
changing the "transform" value for the X-Axis makes the text appear in full (almost), but then the legends are being truncated:
How can I make them appear in full? Couldn't find my answer in the docs.
Here's a sandbox to reproduce the problem: https://codesandbox.io/s/missing-legends-text-pns6v
IMPORTANT: 'width' is not the problem, it is somehow covered with a sort of a white line... also, I tried many 'width' sizes
The problem I'm referring to is this:
Would love to hear if there's a way to wrap the text, or truncating with adding on hover effect to show the full text
solution 1 : increase margin
You can set the left property in margin of ResponsiveBar. In the following example set to 240px:
<ResponsiveBar
........
margin={{ top: 50, right: 150, bottom: 50, left: 240 }}
........
/>
You will also need to update the container style to expand the chart setting the margin to 0 for example :
style={{
.....
margin: "0"
}}
Result:
Sandbox
solution 2: tooltip
If you don't want to increase the margin, you can override the format function in axisLeft props and :
cut the string like New York, Manhatta...
add a <title> tag to display a tooltip :
axisLeft={{
format: (v) => {
return v.length > 10 ? (
<tspan>
{v.substring(0, 10) + "..."}
<title>{v}</title>
</tspan>
) : (
v
);
},
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "",
legendPosition: "middle",
legendOffset: -40
}}
checkout this post
Sandbox
I am using RGraph version 5.00, trying to make a scatter plot that looks like this,
https://i.stack.imgur.com/lsPB8.png
This is my best effort, thus far,
https://i.stack.imgur.com/LKIYH.png
How can I move the Y-Axis from the left-hand side to the center of the plot?
I've tried setting the 'xaxisScaleMin' option to 'mirror', but that doesn't work. Here is my code,
new RGraph.SVG.Scatter({
id: 'chart-container',
data: [],
options: {
backgroundGridHlinesCount: 10,
backgroundGridVlinesCount: 10,
colors: ['cyan', 'magenta', '#cc0', 'black', 'red', 'green', 'blue', 'brown'],
linewidth: 3,
gutterLeft: 50,
gutterBottom: 50,
xaxisLinewidth: 1.5,
xaxisScale: true,
xaxisScaleMax: 125,
xaxisScaleMin: -125,
yaxisLabelsCount: 10,
yaxisLinewidth: 1.5,
yaxisScale: true,
yaxisScaleMax: 125,
yaxisScaleMin: -125,
title: 'solid ink colors'
}
}).draw();
2019-05-29:
Looking at the source, RGraph.svg.common.core.js, there is no way to place the Y-axis at the origin, as with the X-axis. Placing the Y-axis on the origin, when it is in the range of the graph, seems like a proper default behavior, or should at least be a simple option. I will try changing the source.
One of the examples in the download does just this:
demos/scatter-negative-x-axis.html
The trick is to add a large left margin and then use the drawing API X axis to add the extra axis (the left-hand-side X axis).
(incidentally - the lines that are shown on the chart are just trigonometry curves - sin/cos/tan)
You can get the RGraph download here:
https://www.rgraph.net/download.html#stable
I'm attempting to use JsPDF and HTML2Canvas to create a downloadable PDF file. I'm using AngularJs. The HTML content contains several long tables that are sometimes 3-4x the width of the PDF. Although the PDF ends up close to perfect, I've run into several defects:
Table columns occasionally don't display their respective values in the PDF (partial or no data)
If a date field is not provided, the table in the PDF defaults to 12/31/9999
A single row table shifts all its values left by one. As a result, there is no record/ID and the last column value is undefined.
I tried messing around with margins and content width. Unfortunately, only margin.top/left have any effect.
This is the code I've used:
$scope.savePdfSample = function(value) {
html2canvas(document.body,{
onrendered:function(canvas){
var doc = new jsPDF('l', 'pt', 'letter'),
source = $("#template_invoice")[0], //not sure what this does
margins = {
top: 40,
bottom: 40,
left: 40,
right:40,
width: 1000,
};
doc.fromHTML(
$("#ccsReport1").html(),
margins.left,
margins.top,
{
'width': margins.width,
},
function(dispose) {
doc.save('CCS Case Details.pdf');
},
margins
);
}
});
};
I've tried messing around with the jspdf.debug.js file, but I haven't found a solution yet. I'd appreciate anyone pointing me in the right direction. Thank you.
I have got a question of Highcharts sankey-diagram.
Is there anyone can help me with changing the length of connection line?
It's too wide between data columns. I want to narrow the size to half.
here is the sample code from hightchart demo:
https://www.highcharts.com/demo/sankey-diagram
You can use marginLeft & marginRight properties to narrow the size of the series:
chart: {
marginLeft: 200,
marginRight: 200
},
Live demo: https://jsfiddle.net/BlackLabel/qygesf42/
API references:
https://api.highcharts.com/highcharts/chart.marginLeft
https://api.highcharts.com/highcharts/chart.marginRight