I tried to understand which classes were involved in the style for the axis but It didn't help me at all.
I didn't find the right class to add a margin between the axis and the text.
Could you suggest me something about it ?
In order to do this you can select the axis text and change x, y, dx, dy, text-anchor attributes accordingly, for example:
d3.select(".nv-x").selectAll(".tick text")
.attr('y', 15);
Related
I have 2 charts added to a dashboard, and sharing a common custom cursor.
How do I make sure the width of the columns displaying the Y-Axis ticks have the same width, (so that the custom cursor line matches up perfectly)?
The easiest way is to explicitly configure the thickness of both Y axes to the same pixel value.
chart1.getDefaultAxisY().setThickness(140)
chart2.getDefaultAxisY().setThickness(140)
.setTickStrategy(AxisTickStrategies.Empty);
please refer the pic.
The "grid" is formed by the intersections of all Axis ticks.
If you want to hide the tick labels, but keep the grid, you can do it by hiding tick label style (text) and tick style (small tick between axis and label).
Please refer to the official documentation Numeric Ticks FAQ for tick style syntax.
In this case, VisibleTicks.setTickStyle(emptyLine).setLabelFillStyle(emptyFill) to hide these two parts.
Took me like three days to figure this out. This is set to work on a chart that has a DateTime horizontal axis, but you could tweak a little to work for two number axii. All complaining aside about why this is the way you set things like axis tick visibility:
//turning axis labels off entirely:
function disableTicks(chartObj) {
chartObj.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime,(ticks) =>ticks.setDateOrigin(dateOrigin).setMajorTickStyle((style)=>style.setTickStyle(emptyLine)
.setLabelFillStyle(emptyFill)
).setMinorTickStyle((style)=>style.setTickStyle(emptyLine)
.setLabelFillStyle(emptyFill)
))
chartObj.getDefaultAxisY().setTickStrategy(AxisTickStrategies.Numeric,(ticks) =>ticks.setMajorTickStyle((style)=>style.setTickStyle(emptyLine)
.setLabelFillStyle(emptyFill)
).setMinorTickStyle((style)=>style.setTickStyle(emptyLine)
.setLabelFillStyle(emptyFill)
))
}
You also need to add 'emptyFill' alongside the other declarations (or imports? I've been out of my depth for miles now) at top of your html like so:
<script src="/js/lcjs/lcjs.iife.js"></script>
<script>const { lightningChart,OHLCSeriesTypes, OHLCFigures,
AxisTickStrategies,
LegendBoxBuilders,
Themes, SolidLine, SolidFill, PointShape, ColorHEX, emptyLine, emptyTick,emptyFill } = lcjs</script>
I have 2 questions.
I made a program that makes charts but the legend it is not realy clear.
I already enlarged the icons (in css) but I would like to fill them up with the same color like there border.
Now question 2. I would like to set the background of my cells to the same color as the matching line in the graph is there a way I can ask what color a line is in the graph?
My program
list.add(w2+" ("+percent+"%)");
months.keySet().forEach((it) -> {
series.getData().add(newXYChart.Data(it.toString().substring(0, 7), months.get(it)));
});
series.setName(w2);
graph.getData().add(series);
graphs.put(w2, series);
I make a XYChart and save it in a hashmap. The tag I put in the hashmap I put in the lisview on the right.
i need to set arabic numbers on y axis for my asp.net chart, but unfortunately changing the font would not help me. So i tried to change the label text by Code, for all labels I want to change the TEXT of labels, is it possible, is there any way? please see my Chart, i want to change the circled part numbers. thanks
You may use label formatter callback function.
function Format(label, series) {
return "your arabic text";
}
HighCharts is really good for drawing charts.
http://jsfiddle.net/QQk8Z/3/
Is there some way to position the legend using ZedGraph so that it is on the right-hand side, but vertically centred. Using:
output.Legend.Position = ZedGraph.LegendPos.Right
positions the legend at the top right, but beside a pie chart this looks misaligned. Is there a way to get the legend to vertically centre?
Changing output.Legend.Location.Y seems to have no effect, nor does trying output.Legend.Location.AlignV = ZedGraph.AlignV.Center
Added in response to first answer below...
Floating, reducing the chart size and positioning the label does centre vertically, and is better than I had managed previously. Unfortunately it has a side-effect, in that the legend switches to multi-column and tries to occupy half the width of the total chart area, thus usually overlapping the chart (see picture). Looking at the ZedGraph source, this wider mode is used for all layouts except Left and Right.
Location is only enabled when Legend.Position is set to Float.
You could do like this (C#):
output.Legend.Position = LegendPos.Float;
output.Legend.Location =
new Location(1.05f, 0.5f, CoordType.ChartFraction, AlignH.Right, AlignV.Center);
with the probably undesired "feature" that the legend is drawn partially inside the chart:
To workaround this issue I believe you also have to manually resize your chart:
output.Chart.Rect = new RectangleF(xstart, ystart, xsize, ysize);
Anders' answer nearly worked, except it had the side-effect of changing the width of the legend. This led me to download the source code to find out why, and I discovered that the legend positioning code is actually quite trivial. LegendPos.Right is only referenced twice in the code, both times in Legend.CalcRect
Adding a new LegendPos.MiddleRight only needs it added to the enum, a case for MiddleRight added to the first Switch which runs the same code as Right. And in the second Switch in CalcRect the following:
case LegendPos.MiddleRight:
newRect.X = clientRect.Right - totLegWidth;
newRect.Y = tChartRect.Top + tChartRect.Height / 2 - totLegHeight / 2;
tChartRect.Width -= totLegWidth + gapPix;
break;
This is the same code as for LegendPos.Right except for the newRect.Y line.