I want to copy a chart to the clipboard. I'm doing it by converting the chart to a canvas using html2canvas npm package.
Is there any event I can listen to that will indicate that the lines in the chart are already drawn and i can safely copy to clipboard?
Right now if i'm not waiting long enough I get an empty chart.
You can make us of the onAnimationEnd props of any chart component like <Line>, <Bar>, <Pie> or whatever you are using. Just to make it clear; it is not defined for LineChart but Line component itself.
I think it is not documented, but works like a charm.
<LineChart width={730} height={250} data={data}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<XAxis dataKey="name" />
<Line type="monotone" dataKey="pv" stroke="#8884d8" onAnimationEnd={this.copyToCanvas} />
</LineChart>
Related
When creating a bubble chart, such as https://www.amcharts.com/demos/bubble-chart/, is it possible to ensure the chart area/grid is square without specifying the chart div width and height? I'm hoping it could be somewhat responsive. No matter what the window size, the chart 's grid is square. It would need to take into consideration any axis labels.
I'm using React/TypeScript. Thanks!
After struggling with amchart settings to no avail, the following solution works. However, seems like there should be away to do in with chart settings.
This article explains how to maintain a specific aspect ratio for images. I simply adopted it for the bubble chart.
<div style={{ position: 'relative', paddingTop: '93%' }}>
<div id={chartId} style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: '100%' }}></div>
</div>
Create a container div with relative positioning and the top padding to the correct aspect ratio
Create the chart div as a child with absolute positioning
Render the page
Take a screenshot, paste it in your favorite image editor
Measure the pixels
Recalculate the top padding
For my chart, which has axis text on the left and bottom, 93% was perfect. Now, no matter the page width or device, the grid is always square. HTH.
The Recharts docs describe how to format the style of a data point during hover, as well as the tooltip.
However during a hover, the solid vertical line that appears does not seem to be described in the docs (unless I'm missing it).
Is there a prop that allows for formatting that line?
(If you don't know what I'm talking about, it's the solid vertical line above "Nov-14" in my example image)
This is my line chart and the result:
<ResponsiveContainer>
<LineChart data={this.props.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="date" tickFormatter={xFormatter}/>
<YAxis dataKey="value" tickFormatter={yFormatter}/>
<Tooltip />
<Line type="monotone" dataKey="value" stroke="#4F80E4" strokeWidth={2}/>
</LineChart>
</ResponsiveContainer>
You will need to edit the cursor :)
<Tooltip cursor={false}/>
// Out of topic: since you using recharts, can you take a look at my question too Is there a way to set Background Color of XAxis
It seems like the height and fixedBarHeight cant both be used in a rowChart. Ids like to use fixedBarHeight so all the bars have the size I want, and the chart to be in a scrollable div so that the numbers of bars define the height of the chart. Is this possible?
#ialarmedalien made this block, which introduces a dc.axisChart to separate the axis of the row chart from the actual chart.
Then you can use conventional overflow-y: auto on the row chart div.
Here is a related issue on dc.js.
The dc.axis addon mentioned by #Gordon will solve the problem with the axis in a scrollable div, but not the problem asked. By default, the axis will only appear at the bottom, not before.
To solve this, add one div after the row chart div, this div will contain a copy of the axis.
<div id='row-axis'></div>
Then initialize this axis in the javascript
dc.axisChart('#row-axis')
.margins({ left: 10, top: 0, right: 10, bottom: 10 })
.height( 50 )
.width( 300 )
.dimension( dimension )
.group( group )
.elasticX( true );
Then change the margin of the row chart to 'glue' correctly with the axis. They also must have the same width.
.width(300)
.margins({ left: 10, top: 0, right: 10, bottom: 0 })
Then , in the css
div.dc-chart {
float: none;
}
Dont forget to include overflow-y: auto for the row style. Then you get:
This however doesnt solve the gap problem if your height is too large (or too small) compared to the fixedBarHeight.
But now your margin is zero, so the proper height is easy to calculate (but you must pass the gap value, which has 5 by default). Assuming N=chart.group().all().length, then do:
.fixedBarHeight(X)
.height(X*N + gap*(N+1))
Which will give you:
Worth mentioning that at this point you dont even need the fixedBarHeight anymore. Simply setting the height using XN + gap(N+1) will result in dc auto setting this value to X.
Based on: https://bl.ocks.org/ialarmedalien/0a4bf25ffc0fb96ae569a20f91957bc1
Just add style="overflow-y: auto; height: 300px;" in your rowchart div. It should work.
I try to create a View with an Image and a Text component that wraps around the Image component.
My styling:
textContainer: {
flexDirection: 'row',
},
text: {
flex: 10,
},
image: {
flex:1,
height: 180,
width: 150,
margin: 10,
borderColor: '#ccc',
borderWidth: 1,
}
My component:
<ScrollView style={styles.contentContainer} >
{this.props.content.title_1 ? <Text style={styles.title}>{this.props.content.title_1}</Text> : null}
<View style={styles.textContainer}>
{this.props.content.text_1 ? <Text style={styles.text}>{this.props.content.text_1}</Text> : null}
{this.props.content.image_1 ? <Image width={null} height={null} style={styles.image} source={this.props.content.image_1} /> : null}
</View>
</ScrollView>
This is what the result: (not wrapping at all haha)
In the image beneath here, I quickly hacked the little image into the text. But I can't get the text to be wrapped around..
I hope anyone can help me in the right direction!
This is really hard but there is one weird way to do this.. Try the following. It worked for me but place I am doing this is too deep in the other views.:
<Text>
<View style={{width:400, height:100, flex:1, flexDirection:'row'}}>
<Image source={require('')}/>
<Text>Your Content Here</Text>
</View>
</Text>
Good luck. Please put a comment letting us know if it worked.
On android you cannot place a View inside Text, but you can place an Image, here is an example:
<Text>
<Image source="" />
<Text> Insert your text here </Text>
</Text>
Although this is an old post, I'll add this because I have recently had this problem and found a totally different approach that works for me. I don't have the code to hand (I can get it if anyone wants it), but the principle was this:
Requirement: to have a picture in the top left corner of the screen that takes up about half the screen width, with text starting to the right of it and then continuing beneath it for the whole width of the screen.
In XML, create a RelativeLayout containing an ImageView (IV) on the left and a TextView (TVA), set to wrap content, on the right. Then create another TextView (TVB) to sit below the Relative Layout. TVA is for the text beside the image and TVB for the text beneath it.
Put your image in IV. Then measure the height of IV in pixels (dpi). Call this height IVh
Put some of your text in TVA. As long as there is enough text to wrap over several lines, it doesn't really matter how much. Then measure the height of TVA in pixels. Call this height TVh
Compare IVh with TVh. If IVh=TVh then you have just the right amount of text to sit alongside your image. If TVh = IVh x 2 then you have twice as much text as you should have. And so on.
Adjust the number of words accordingly and put the right number into TVA, replacing what was there, then put the rest of the text in TVB.
You will need to play with margins and padding to allow an adequate margin around the image. Also, in steps 3 and 4 after you have put your image into ImageView or your text into TextView, you will need a delay before measuring the heights, to allow the display to be created - otherwise the measurement will be done too soon, before there is anything on the screen, and will return a height of zero. I found 200 milliseconds quite adequate and it's too fast for the user to notice a delay.
I'm trying to disable the tooltip for the line serie of my chart and leave the one of the bar serie. I can't really see how I can do it.
The problem I have with both series' tooltips enabled is that I cannot see the tooltip of the bar serie because it's always selecting the one from the line which is closer. Maybe it's possible to trigger the tooltip if the mouse is closer to the point? at the moment it's triggering it at around 10-20px away from the point.
This should do it:
var chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
...
;
chart.lines.interactive(false) // add this line