I am trying to shift the x-axis ticks so that they are aligned with each bar rect. The idea is that the bars correspond to an event between the hours of x - y and the ticks are a little mis-leading. I've tried to use tickFormat() but that seems to only effect the labels. I've also looked through the D3 docs as the react-vis docs mention them quite a bit.
current chart
So ideally the bar that is centered on the 10am position would be shifted to the right so its centered between 10am - 11am. Is there another function that I can use to accomplish this?
I was able to accomplish this after looking through all of the open issues on the react-vis repo. Luckily in my case there would always be a set number of points so this fix will work but if your ticks are dynamic you would need to calculate the amount to move the ticks. In my case there are 24 total ticks and the width of the chart is 962px so each tick is about 40 pixels apart. To shift each tick over half way translate the x location by half of the width between each tick (minus 1 to account for the 1px width of the tick line itself). Also had to shift the text down because once I messed with the transform it cleared the existing transform added by the library. Not the best but hopefully this will help someone in the future. 👍
.rv-xy-plot__axis__tick {
line {
transform: translate(-19px, 0);
}
text {
transform: translate(-19px, 14px);
}
}
Using #Justin's answer above, I was able to nudge my XAxis labels using transform like so:
<XAxis
tickLabelAngle={-45}
style={{
text: {
stroke: "none",
fill: "#FF0000",
fontSize: 10,
fontWeight: 100,
transform: "translate(10px, 0)",
},
}}
/>
Related
I'm using recharts library to create a chart. The x axis of the chart is the timeline axis and I use timestamps as values for it. What I'm trying to do is to display only 5 ticks(for example) spaced equally. I found a lot of people having similar problems on the library git repository. One fixes was to use scale="time" and setting a minimum tick gap for x axis:
<XAxis dataKey='timestamp'
domain={['dataMin', 'dataMax']}
type = 'number'
scale="time"
minTickGap={120}
tickCount={7} */
tickFormatter = {(unixTime) => moment(unixTime).format('DD MMM')}
/>
I'm using the brush component of the library to zoom in on the chart and the problem with this implementation is that when I zoom in sometimes it displays all the ticks.
Ex. without zoom in:
Ex zooming in:
I found that if I remove the scale="time" parameter and set a specific tickCount and set interval to 0 the problem that occurs when I zoom in disappears but 1 tick is missing or it appears only when I zoom in.
<XAxis dataKey='timestamp'
domain={['dataMin', 'dataMax']}
type = 'number'
interval={0}
tickCount={7}
tickFormatter = {(unixTime) => moment(unixTime).format('DD MMM')}
/>
Does anyone now how can I fix the issues mentioned above? I don't think I can use predefined ticks based on maximum and minimum values of the axis because those values becomes irrelevant when I zoom in.
There is no cure for it as far as I know. You could mention all your tick explicitly in ticks param like ticks={[10,20,50,200,500,1000]} and they will do just fine
Another workaround for me is to set domain as
domain= {['auto','auto']}
and it shows all the ticks correctly.
I have 24 hours format values on y axis.I want to display all 24 hours on y-axis.But in heatmap using zingchart display hour in gap of 3 as shown in image.
So,what is the setting required to display all hours on y axes.
You can try setting the following attributes to adjust the max amount of items visible:
scaleX: {
maxItems : 24,
itemsOverlap : true
}
There is full information in our help center about showing hidden labels on the x-axis -> https://help.zingsoft.com/en/articles/3546391-zingchart-how-to-show-all-labels-on-my-axis
I wanted to know how I can do so that the objects of a layout can be adjusted to the different sizes of the screens of cell phones or tablets.
For example:
If I assemble the design for a small screen (Nexus S) it looks good on that screen, but if I emulate in a pixel 2 XL you see everything small.
How can I adapt the elements or what property are used to fit all screen sizes?
The easy answer would be to add a function that adjusts the dimensions (or fontSize) depending on the screenSize. but from my personal experience I wouldn't recommend to use it as you could end up on huge Pictures or Texts for big phones and Tablets. I am currently using react-native-extended-stylesheet which offers great support for media-queries, variables, dynamic themes, relative units, percents, math operations, scaling and other styling stuff
Your code will look something like that:
const styles = EStyleSheet.create({
column: {
width: '80%' // 80% of screen width
},
text: {
color: '$textColor', // global variable $textColor
fontSize: '1.5rem' // relative REM unit
},
'#media (min-width: 350) and (max-width: 500)': { // media queries
text: {
fontSize: '2rem',
}
}
});
Im using leaflet to create a photo map, with my own tiles, which works as expected.
Im trying to work out how I can prevent the zoom from following this Quadtree type pattern:
Zoom Level 0 - Entire map width = 256px;
Zoom Level 1 - Entire map width = 512px;
Zoom Level 2 - Entire map width = 1024px;
And so on...
I would like to be able to zoom in say increments of 25% or 100px.
An example of 100px increments:
Zoom Level 0 - Entire map width = 200px;
Zoom Level 1 - Entire map width = 300px;
Zoom Level 2 - Entire map width = 400px;
And so on...
Question:
What is the logic for doing this? If it is at all possible?
My reason for wanting to do this is so that my photo map (which doesnt wrap like a normal map) can be more responsive and fit the users screen size nicely.
I made a demonstration of my issue which can be seen here
The short answer is that you can only show zoom levels for which you have pre-rendered tiles. Leaflet won't create intermediary zoom levels for you.
The long answer is that in order to use do this, you need to define your own CRS scale method and pass it to your map, for example:
L.CRS.CustomZoom = L.extend({}, L.CRS.Simple, {
scale: function (zoom) {
// This method should return the tile grid size
// (which is always square) for a specific zoom
// We want 0 = 200px = 2 tiles # 100x100px,
// 1 = 300px = 3 tiles # 100x100px, etc.
// Ie.: (200 + zoom*100)/100 => 2 + zoom
return 2 + zoom;
}
});
var map = L.map('map', { crs: L.CRS.CustomZoom }).setView([0, 0], 0);
In this example, I've extended L.CRS.Simple, but you can of course extend any CRS from the API you'd like, or even create your own from scratch.
Using a zoom factor which results in a map pixel size that is not a multiple of your tilesize, means your right/bottom edge tiles will only be partially filled with map data. This can be fixed by making the non-map part of such tiles 100% transparent (or same the colour as your background).
However, it is, in my opinion, a much better idea to set the tilesize to match the lowest common denominator, in this case 100px. Remember to reflect this by using the tileSize option in your tile layer. And, of course, you will need to re-render your image into 100x100 pixels tiles instead of the 256x256 tiles you are using currently.
One caveat, the current version of LeafletJS (0.5) has a bug that prevents a custom scale() method from working, due to the TileLayer class being hardcoded to use power-of-2 zoom scaling. However, the change you need to do is minor and hopefully this will be addressed in a future release of Leaflet. Simply change TileLayer._getWrapTileNum() from:
_getWrapTileNum: function () {
// TODO refactor, limit is not valid for non-standard projections
return Math.pow(2, this._getZoomForUrl());
},
To:
_getWrapTileNum: function () {
return this._map.options.crs.scale(this._getZoomForUrl());
},
this is what I'm trying to do...
I have a chart with a line series with markers in it. In the X axis I have dates and in the Y axis a number. So lets say I have in x dates from yesterday to next week. And each day has a corresponding Y axis value.
What I want to do is change the color of the marker that belongs to the actual date.
In other words, to make it clearer, I want to change the color of a single marker in a ExtJS line series. I know of markerConfig but that doesn't seem to help since it applies to all markers.
I haven't found anything like this around so I stopped here to see if you guys could help me.
Thanks in advance!
I think the easiest way to do this is to highlight a single datapoint in a series.
First, define your highlight style.
Ext.create('Ext.chart.Chart', {
...
series: [{
type: 'line',
highlight: {
size: 10,
radius: 10,
fill: 'red'
},
...
});
Then, select the appropriate datapoint in your series and call the highlightItem() method. Here's an example showing how to use the method.
var series = myChart.series.get(0);
series.highlightItem(series.items[2]); // highlight the 3rd data point in the series
The result would look something like this.