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
Related
I would like to add a legend to my Heat Map Layer using LegendControl Module. I want to add StopColors in the legend using the number of points. However the HeatMapLayer color option only allows HeatMapDensity (0 to 1) in the data expression. How do we assign colors to HeatMapLayer using "interpolate" expression and the number of points ?
color: [
'interpolate',
['linear'],
['heatmap-density'],
0,
'rgba(0,0,0,0)',
0.2,
'royalblue',
0.4,
'cyan',
0.6,
'lime',
0.8,
'yellow',
1,
'red'
],
However adding ['get','point_count'] to the color throws error inplace of heatmap_density. How to create a legend and color the heat map based on number of points ? Thanks !
Sounds like you are trying to create a weighted heat map. Use the weight option. For example:
var layer = new atlas.layer.HeatMapLayer(datasource, null, {
weight: ['get', 'point_count']
});
I am trying to implement the react-chessboard component. I want a page that contains an empty chessboard and the pieces are kept outside for the user to drag and drop them into the board. By default the board is set to the starting position.
In the react-chessboard documentation, I came across a prop called 'customDndBackend' which takes a value of type BackendFactory. I could not find it anywhere so I asked it here. Any help would be appreciated.
react-chessboard-npm page
<Chessboard
className={classes.board}
boardWidth={
window.screen.width < 600 ? 0.9 * window.screen.width : 560
}
arePiecesDraggable={true}
// position={'start'}
animationDuration={200}
customBoardStyle={{
borderRadius: '4px',
boxShadow: '0 5px 15px rgba(0, 0, 0, 0.5)',
}}
customDarkSquareStyle={{ backgroundColor: '#A1B57D' }}
customLightSquareStyle={{ backgroundColor: '#F7F7EE' }}
customPieces={customPieces()}
ref={chessboardRef}
/>
I'm actually the author of this package so maybe I can help.
The package utilises react-dnd to handle dragging and dropping. This comes with different "Backends" for handling dragging and dropping on Mobile devices or Browsers.
react-chessboard has its own logic to try to load the correct backend for you automatically. But in case you want to override it with your own, or set a specific one, you can use the prop to pass it in yourself. That's all there is to it really, here's some code used in the package for more reference.
const backend = customDndBackend || (isMobile ? TouchBackend : HTML5Backend);
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 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
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.