When using a Flex chart, the y-axis is drawn as a thick (about 8px) grey line. Is it possible to change this to be just a thin line like the x-axis?
Yes. You need to set your own LineSeries with a custom SolidColorStroke that you specify.
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)
I have a mx.charts.LineChart in Flex and I would like to know how to reduce the padding between the value labels and the tick markers? I've highlighted the region I mean with yellow boxes in the image below.
I'd like the labels to be as close as possible to the tick markers, just a couple of pixels will do.
I only care about applying this to the x-axis.
I'd also be interested to know how to reduce the padding between the axis title (e.g. kB and minutes on chart below) and the value labels.
Use the labelGap style of the AxisRenderer class.
By default it is 3 pixels, you can set it to 0 (or even a negative value if still not close enough).
For positioning the axis title there is no easy solution. You could write the vertical axis title yourself, as a label on top left of the chart. An advantage is that it is much better for the user to read (than the vertical writing).
I'm trying to display a graph with the xAxis and yAxis grid lines overlayed on top of the plot.
I can set the zIndex of the plot, but there doesn't seem to be an option to set the zIndex of the grid.
If it's not possible, I can lower the opacity of the plot so that the grid shows through from underneath, but I'd rather not do it that way.
I can't find a way. Even setting zIndex on the series to -99 makes no difference. Have you considered using plot lines or plot bands to draw your own? These both support zIndex.
Update:
Original poster found that the highstock gridZIndex option works for highcharts.
http://api.highcharts.com/highstock#xAxis.gridZIndex
Adobe's docs describe how to apply an outline to the pie chart by using the mx:stroke element within a PieSeries, however this only changes the border of the entire chart.
How do I add a border around each of the wedges in the chart?
There's two properties:
stroke (the stroke around the circumference)
and
radialStroke (the stroke within the pie chart itself)
If you're successfully setting one then the other is applied in the same manner.
Josh
I have a Flex3 LineChart component using an CircleItemRenderer and the datapoints are being cut off because they are too close to the edge. Here's what it looks like:
http://img29.imageshack.us/img29/3850/chartx.png
As you can see, the circles on the left and right sides are being cut off.
How can I make the LineSeries area, plus the horizontal labels, narrower so it fits in the chart area?
Thanks!
I had the same issue and was able to resolve it by setting the clipContent attribute in the chart tag to false. I found this solution on Amy's Flex Diary.
You might want to set the maximum and minimum values in your LinearAxis in the horizontalAxis object. Check the API for more information: http://livedocs.adobe.com/flex/3/langref/mx/charts/LinearAxis.html
The Line Chart determines automatically these values to fill all the elements in the screen. You might want to change these values so the graph has some space at the sides.
You can set the padding property on the horizontalAxis and verticalAxis child objects as well...
Adjust the mask on the chart component.
I got this to work by changing the type from LineChart to ColumnChart. I still had all of the same axis definitions including Line Series. The results are the same Line graph, but more centered on the graph instead of touching the edges. None of the other padding or gutters were what I was looking for.
I got d solution.
create creationComplete event in LineChart
edit horizontalAxis's padding you want
e.target.horizontalAxis.padding = 0.2;