My question is about a specific Graphs and Charts Building Tool call AMCHARTS. I am using their live editor to build a Graph, and I need to remove the vertical lines (leave the horizontal lines only) from the chart grid.
Is it possible to do so?
thanks,
Just in case someone is still looking for the answer:
//disable horizontal lines
valueAxis.renderer.grid.template.strokeWidth = 0;
//disable vertical lines
categoryAxis.renderer.grid.template.strokeWidth = 0;
just change "categoryAxis"
"categoryAxis": {
"gridThickness": 0
},
Thanks.
If you're looking for a solution on amCharts 4 use the following:
categoryAxis.renderer.grid.template.disabled = true;
See official docs for disabling certain elements
For removing the horizontal lines in the grid ...
"valueAxes":{
"gridThickness":0
},
Just did some research, I'm posting the answer so that other can benefit. This option is in the "Category Axis -> Grid and Fills" Section.
this is a good anseer by adding one more category or value axis to our charts:
https://github.com/amcharts/amcharts4/issues/2866
If you are looking for am5charts, then add
yAxis.get("renderer").grid.template.setAll({
strokeWidth: 0,
visible:false
});
xAxis.get("renderer").grid.template.setAll({
location: 0,
strokeWidth: 0,
visible:false
});
Related
For better understanding of this question, let me show a working example in TradingView webpage, on which the following chart shows the combination of Momentum (area chart) + ADX (line chart):
As you can see, there are 2 vertical values, at left side is the ADX which the scale goes usually from 0 to 60(+-), but the right side, it can grow much more.
On my attempt to achieve the same here, the momentum (area chart) has a huge range, and the adx (lineal chart) goes from 0 to 60, so when it tries to fit both values under the same scale, my blue line looks like it's almost zero, in comparison with the area chart values. (Mouse-over the blue line showing that is currently 43)
So I think you get the point, would it be possible to have 2 scales/vAxis for each series of values?
I checked documentation already but nothing here seems to refer to what I mention:
https://developers.google.com/chart/interactive/docs/gallery/combochart
And just in case you need the options provided to the chart, nothing advanced, just the basic examples:
options:{
seriesType: 'area',
series: {
0: { type: 'line', color: 'blue' }
}
};
use option --> targetAxisIndex -- in the series option...
zero is the default v-axis
targetAxisIndex: 0
to create a second v-axis, assign one of the series to index 1
series: {
1: {
targetAxisIndex: 1
}
}
Found the solution over this post in the documentation, it is conceptually known as DUAL-Y Charts
https://developers.google.com/chart/interactive/docs/gallery/columnchart#dual-y-charts
In ag-Grid, if the columns occupy a smaller space than the width of the grid, a blank hole appears on the right of the last column. Please see below (example taken from ag-Grid docs):
The UX designers on my team don't like that. They would like to see the rows extended all the way to the right to balance out the look. Is this possible to do with ag-Grid?
Edit: We don't want to use the sizeColumnsToFit option, because on large monitors it produces very wide columns and the grid becomes unreadable. We want to use the autoSize option to compact the columns and fill the hole on the RHS with blank stripes as suggested above.
Yes it is possible. You can call the sizeColumnsToFit function on the ag-Grid api which will fill out the width of the table with the columns.
Take a look at documentation.
Here is a plunker example.
EDIT
Use the property suppressSizeToFit and set it to true to when you call sizeColumnsToFit, it won't have an affect. Apply this property to the defaultColDef and set it to false for the last column. This was, when you call sizeColumnsToFit, only the last column will be set to full width. See the updated plunker above.
this is how i do it:
/**
* if there is "dead space" present on the grid, the columns will be auto sized to fill the gap
* #param gridApi
* #param columnApi
*/
resizeColumnsToFit(gridApi: GridApi, columnApi: ColumnApi, allowShrink = false) {
if (allowShrink) {
gridApi.sizeColumnsToFit();
} else {
const gridBodyWidth = document.getElementsByClassName("ag-root-wrapper")[0].clientWidth; // todo: use grid's id instead of [0] to allow multiple grids on a page
const allColumnsWidth = columnApi.getAllDisplayedColumns().map(c => c.getActualWidth()).reduce((a, b) => a + b, 0);
if (gridBodyWidth > allColumnsWidth) {
gridApi.sizeColumnsToFit();
}
}
}
This method will size columns to fit only when there is "dead" space on the right. Optionaly set allowShrink to true to force resizing even if there is no dead space
I had the same situation and resolved with the following css override:
.ag-center-cols-container {
width: 100% !important;
}
One possible option I've been playing with is adding a fake column at the end to fill the remaining space. To do so, you just need to add a column with options similar to the following to the end of your list of columns:
{
flex: 1,
headerName: '',
}
See this plunker forked from #ViqMontana's example above.
It's not a perfect solution, but wanted to mention it here in case it helps.
This works like Craig Weston's answer but without the need for !important:
.ag-center-cols-container {
min-width: 100%;
}
I have this chart, which has line and bars:
Is it possible to somehow extend the line outside of the chart in both directions? This line serves an important role, it is sort of a "limit" for bars, I just don't want for it to start at the center of the first bar, and to end at the center of the final bar.
I can extend it to the right by simply extending the dataset of the line, but is it possible to extend it also to the left somehow?
I figured out answer based on answer from this question: Is it able to align line chart at left margin in mixed chart?
I'm extending line type like this:
Chart.controllers.LineNoOffset = Chart.controllers.line.extend({
updateElement: function(point, index, reset) {
Chart.controllers.line.prototype.updateElement.call(this, point, index, reset);
const meta = this.getMeta();
const xScale = this.getScaleForId(meta.xAxisID);
point._model.x = xScale.getPixelForValue(undefined, index-0.5);
},
});
Now the LineNoOffset type of the line will start from the left border of the chart, which fulfills my need.
I am using iOS Charts with Swift 3, and I can't figure out how to do a couple things:
I want to remove the margin around the chart. I know the chart goes edge-to-edge in my UI because if I change the chart's background color, it goes all the way to the edge. How do I remove the gap indicated by the red arrows below?
How do I remove the border around the whole graph (note the black arrow)? I already have totalsGraph.drawBordersEnabled = false and it doesn't work. Is there a different option for that?
Thank you!
It is minOffset.
/**
Sets the minimum offset (padding) around the chart, defaults to 10
*/
You can change it as this:
chartView.minOffset = 0
that line is actually axis line.
To hide the all the lines, you can use
totalsGraph.rightAxis.enabled = false
totalsGraph.legend.enabled = false
totalsGraph.leftAxis.enabled = false
totalsGraph.xAxis.labelPosition = .bottom
totalsGraph.xAxis.drawGridLinesEnabled = false
totalsGraph.xAxis.drawAxisLineEnabled = false
I am looking for solution to remove margins as well. I will update my answer when I find it.
Actually the way to do it is like this:
chartView.xAxis.enabled = false
chartView.leftAxis.enabled = false
chartView.rightAxis.enabled = false
chartView.drawBordersEnabled = false
chartView.minOffset = 0
I am using CoreText to render multiple columns of text. However, when I set the first letter of the 1st paragraph to a bold, larger font than the rest of the text, I incur 2 issues (both visible in the attached image):
The spacing underneath the first line is too big (I understand that this is because the 1st character could be a g,y,p,q etc.
Lines below the first line now do not line up with corresponding lines in the next column.
Any advice on how to overcome these 2 issues would be greatly appreciated, thank you.
According to the documentation kCTParagraphStyleSpecifierMaximumLineHeight should have solved the problem, but unfortunately does not seem to work at least on IOS 4.3.
CTParagraphStyleSetting theSettings[5] =
{
{ kCTParagraphStyleSpecifierParagraphSpacing, sizeof(CGFloat), &spaceBetweenParaghraphs },
{ kCTParagraphStyleSpecifierParagraphSpacingBefore, sizeof(CGFloat), &topSpacing },
{ kCTParagraphStyleSpecifierLineSpacing, sizeof(CGFloat), &spaceBetweenLines },
{ kCTParagraphStyleSpecifierMinimumLineHeight, sizeof(CGFloat), &lineHeight},
{ kCTParagraphStyleSpecifierMaximumLineHeight, sizeof(CGFloat), &lineHeight}
};
CTParagraphStyleRef paragraphStyle = CTParagraphStyleCreate(theSettings, 5);
To be fair documentation says it's available in OS v10.5 and later.
kCTParagraphStyleSpecifierMaximumLineHeight:
The maximum height that any line in the frame will occupy, regardless of the font size or size of any attached graphic. Glyphs and graphics exceeding this height will overlap neighboring lines. A maximum height of 0 implies no line height limit. This value is always nonnegative.Type: CGFloat.
Default: 0.0.
Application: CTFramesetter.
Available in Mac OS X v10.5 and later.
Declared in CTParagraphStyle.h.
It seems the only way to fix this is with a workaround, which is to create 3 frames for the first column,1 for the W, 1 for the rest of the first sentence and 1 for the rest of the first column.