I have two charts (one for price, one for volume). I keep them in sync by usingthe various API observer functions. Works wonders.
Except the price scale width - I can get it using the priceScale('right').width() call, but I don't see any way to set it.
I'd like to be able to keep the width of both chart's price scales in sync (and keep them set to the max width of the two).
Thanks!
Currently it is not possible to set or adjust the price scale width. The price scale adjusts its width to ensure that the tick marks remain fully visible.
It is however possible to have the volume and price within a single chart if that would suit your needs. Here is an example:
https://jsfiddle.net/TradingView/cnbamtuh/
However if you wish to stick with two separate charts then I can suggest a hacky work-around for ensuring that the price scales line up correctly (for charts with the price scale on the right).
Firstly, you can set a custom price formatter to try ensure that the price strings are roughly the same width. This can be done by setting the localization property on the chart options (either during createChart() or with chart.applyOptions() (https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptions).
chart.applyOptions({
localization: {
priceFormatter: (p) => `${p.toFixed(2).padEnd(10)}`,
},
});
If you set a custom font family which is monospaced then you might already have a working solution.
Docs for changing font family: https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#fontfamily
Example for changing the font family: https://jsfiddle.net/TradingView/po7wzr69/
However if you stick with the default fonts then you will most likely need to do the following step as well.
You can then measure the widths of each priceScale using series.priceScale().width() (https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi) and manually adjust the chart sizes using an inline style on the container element for the chart
const margin = largestPriceScaleWidth - currentPriceScaleWidth;
const element = document.querySelector('#container-one');
element.style.width = `calc(100% - ${margin}px)`;
Related
I'm using ChartJS to display multiple charts on a page.
Each chart has a different dataset, and different labels (some have short labels, some have long labels).
Currently the width of the actual 'data-part' (the part of the chart showing e.g. Bars) depends on how much space the labels take. I would like to make all charts have a fixed size for the data-part, and let the labels take up the remaining size.
See for example the following screenshot. Here I display 2 charts, but the actual data-part is different for both, because one has shorter labels than the other.
What I would like is to set for example a fixed width of 400px for the data-part, and let the labels take the remaining space left on the page. That way the charts would be aligned perfectly above each other.
Even better would be if I could set that for each chart the data-part takes a percentage of the width (e.g. 70%), so the labels take the rest (30%).
I have checked the ChartJS documentation, but the only I can find it setting the width for the entire chart-component.
Cheeky solution - you can add a dummy chart before your charts having the same labels.
Let's call this dummy chart as chart D and your main chart as chart M.
In M, you would fix it's width and hide the labels by writing in options -
scales: {y: {ticks: {display: false}}}
Now you have a fixed data width.
In D, you would just display the labels and hide the data part (hiding grid lines, legend, title, etc.).
So now you have two charts side-by-side, one is displaying just the labels and the other displaying the bars, just need to position it in such a way that no matter how long the label is, it does not overlap with M. Repeat the step similarly for all charts and have the same width for M1,M2,M3,...
This is a solution that seemed to work for me.
I used a PieChart in an CodenameOne App and found out, that the labels does not fit on the screen on my iPhone (see screenshot). It's ok on an iPad - but not on smaller devices. I know that I can set a scale-factor - but I think there is no scale factor that fits well for all device sizes.
Is there any solution for this problem?
You can set the label sizes based on millimeter sizes by using convertToPixels from Display or CN. This might not be enough though and you might need to have some special cases to get charts working properly on all devices. You can use features like isTablet and getDensity to tune the behavior to some degree.
Looking at the source for the PieChart, you have a few options here:
Use the renderer's setScale() method to scale the pie chart. This should only affect the radius of the Pie. The default is to make the pie radius 35% of the min(width,height) of the chart component. If you scale it, it will apply that scale. You could check the display width to determine what scale you're going to need so that you only scale on devices that need it.
Use a legend instead of showing the text labels. (i.e. renderer.setShowLegend(true).. and renderer.setShowLabels(false)). Again you can do this selectively based on whether the device is a tablet or a phone.
I am trying to implement a virtual UI ID card that would look like a card on all devices. I will need 4 rows total and 3 columns. I also would like to have the width about twice the size of the height (2:1 ratio).
1) I considered the border layout. but it seems like it spans the whole screen size. Quickly the size of my card width was like 5 times the size of the height. So that did not visually work. I suspect the Gridlayout would suffer from similar issues.
2) I used the table layout (4 X 3). I tried using padding / margin and it seems like the look & feel of the card UI quickly gets out of proportion on tablets while looking decent on phones since phones seem to naturally have a similar width to a card.
3)I tried specifying widthPercentage as a constraint on the table UI. Again this approach sufferred from similar issues. Since on smaller phones I would have to remove add small percentage margins but on big tablets I may need bigger margins. This can get quickly challenging to get right / test.
I am thinking now of attempting to take one of the following approaches:
1) I am not sure if there is a way to specify the TextField width based on the number of characters. For example when the card issue date grows on tablet it can fit 10s of characters where I want it to fit only couple for moht(mm) and 4 chars for year(yyyy). Is there a way to do that?
2) Can I tell the screen width in inches or mm ? I can implement a function to attempt and scale padding / margins on different screen size.
I appreciate any feedback.
See the Kitchen Sink demo which has the default "cards" mode in the start. It uses grid layout with special cases to fit the columns in a sensible way for Tablets/Desktops.
https://www.codenameone.com/demos-KitchenSink.html
I am trying to add one box and one line on x-axis. Please look at below bar chart.
I tried using stripline but I cannot set height for stripline. It goes till 100.
Is there any way I can do this?
Unfortunately, SSRS doesn't provide the functionality you're looking for. A stripline is the closest you can get to that, but like you said, you can't control its height. The only way you could simulate this behavior would be to use a Background Image for your stripline, but that may be more work than it's worth. It would require a lot of manual adjustment to get the image to line up on the chart.
I would add a series to the chart using the Stock chart (under Range). In the Series Properties I would set the High value to the height desired for your line (~52 in your example). Ideally this would come from a dataset value.
Set the Low, Open and Close values to 0.
Try two Stripe Lines. First, create the strip line which represents the vertical value you're after. In my case, I made one that was 50% of the graph height off of the Y-Axis.
Chart Properties:
Height of StripeLine:
Once the stripe line is the correct height for the chart, create a 'mask' stripe line along the X-axis that will cover the portion of the Y-axis line you want hidden.
Chart Propterites:
Width of Stripe Mask:
Using these methods, and some really clever expression writing, you should be able to make the line exactly as high, and as wide as you desire.
I'm working on getting familiar with Sencha charts. I'd like to know if there is any way that I can extend a column outside of the view port. For example I have data for which I have the min, first quartile, third quartile, and max for and I make a stacked chart out of these. However the max contains several outliers that probably won't be relevant to the user. What I want to do is end the view after the third quartile somewhere. Is there a simple and easy way to accomplish this?
You would have to work out the algorithm to get the percentage of records that go beyond your third quartile. That shouldn't be too hard.
Then create a function that set's the chart's width to a size which is equal to:
[viewport width] * (1 + [the percentage])
You can use the chart's setWidth method for this.
You can call this function in the chart's beforerefresh event (it should fire after the chart store data is loaded but before it is rendered on the chart) and also in the viewport's resize event.