Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

yAxis label yOffset fix #776

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Expand Up @@ -14,6 +14,7 @@
import com.github.mikephil.charting.jobs.ZoomJob;
import com.github.mikephil.charting.listener.BarLineChartTouchListener;
import com.github.mikephil.charting.listener.OnChartGestureListener;
import com.github.mikephil.charting.renderer.YAxisRenderer;
import com.github.mikephil.charting.utils.MPPointD;
import com.github.mikephil.charting.utils.MPPointF;
import com.github.mikephil.charting.utils.Transformer;
Expand Down Expand Up @@ -58,11 +59,15 @@ public void setYAxis(Chart chart, ReadableMap propMap) {

if (BridgeUtils.validate(propMap, ReadableType.Map, "left")) {
YAxis leftYAxis = barLineChart.getAxisLeft();
YAxisRenderer leftYAxisRenderer = new CustomYAxisRenderer(barLineChart.getViewPortHandler(), leftYAxis, barLineChart.getTransformer(YAxis.AxisDependency.LEFT), propMap.getMap("left"));
barLineChart.setRendererLeftYAxis(leftYAxisRenderer);
setCommonAxisConfig(chart, leftYAxis, propMap.getMap("left"));
setYAxisConfig(leftYAxis, propMap.getMap("left"));
}
if (BridgeUtils.validate(propMap, ReadableType.Map, "right")) {
YAxis rightYAxis = barLineChart.getAxisRight();
YAxisRenderer rightYAxisRenderer = new CustomYAxisRenderer(barLineChart.getViewPortHandler(), rightYAxis, barLineChart.getTransformer(YAxis.AxisDependency.RIGHT), propMap.getMap("right"));
barLineChart.setRendererRightYAxis(rightYAxisRenderer);
setCommonAxisConfig(chart, rightYAxis, propMap.getMap("right"));
setYAxisConfig(rightYAxis, propMap.getMap("right"));
}
Expand Down
@@ -0,0 +1,112 @@
package com.github.wuxudong.rncharts.charts;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.Log;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.ReadableType;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.renderer.YAxisRenderer;
import com.github.mikephil.charting.utils.Transformer;
import com.github.mikephil.charting.utils.Utils;
import com.github.mikephil.charting.utils.ViewPortHandler;
import com.github.wuxudong.rncharts.utils.BridgeUtils;

/**
* Adds support for rendering YAxis labels with outer stroke
*/
public class CustomYAxisRenderer extends YAxisRenderer {
protected Paint mLabelOutlinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
protected Boolean mHasStroke = false;

public CustomYAxisRenderer(ViewPortHandler viewPortHandler, YAxis yAxis, Transformer trans, ReadableMap propMap) {
super(viewPortHandler, yAxis, trans);

if (BridgeUtils.validate(propMap, ReadableType.Number, "strokeWidth")) {
mHasStroke = true;
mLabelOutlinePaint.setStyle(Paint.Style.STROKE);
mLabelOutlinePaint.setStrokeWidth(propMap.getInt("strokeWidth"));
mLabelOutlinePaint.setColor(propMap.getInt("strokeColor"));
}
;
}

/**
* draws the y-axis labels to the screen
*/
@Override
public void renderAxisLabels(Canvas c) {

if (!mYAxis.isEnabled() || !mYAxis.isDrawLabelsEnabled())
return;

float[] positions = getTransformedPositions();

mAxisLabelPaint.setTypeface(mYAxis.getTypeface());
mAxisLabelPaint.setTextSize(mYAxis.getTextSize());
mAxisLabelPaint.setColor(mYAxis.getTextColor());
mLabelOutlinePaint.setTypeface(mYAxis.getTypeface());
mLabelOutlinePaint.setTextSize(mAxis.getTextSize());

float xoffset = mYAxis.getXOffset();
float yoffset = Utils.calcTextHeight(mAxisLabelPaint, "A") / 2.5f + mYAxis.getYOffset();

YAxis.AxisDependency dependency = mYAxis.getAxisDependency();
YAxis.YAxisLabelPosition labelPosition = mYAxis.getLabelPosition();

float xPos = 0f;

if (dependency == YAxis.AxisDependency.LEFT) {

if (labelPosition == YAxis.YAxisLabelPosition.OUTSIDE_CHART) {
mAxisLabelPaint.setTextAlign(Paint.Align.RIGHT);
mLabelOutlinePaint.setTextAlign(Paint.Align.RIGHT);
xPos = mViewPortHandler.offsetLeft() - xoffset;
} else {
mAxisLabelPaint.setTextAlign(Paint.Align.LEFT);
mLabelOutlinePaint.setTextAlign(Paint.Align.LEFT);
xPos = mViewPortHandler.offsetLeft() + xoffset;
}

} else {

if (labelPosition == YAxis.YAxisLabelPosition.OUTSIDE_CHART) {
mAxisLabelPaint.setTextAlign(Paint.Align.LEFT);
mLabelOutlinePaint.setTextAlign(Paint.Align.LEFT);
xPos = mViewPortHandler.contentRight() + xoffset;
} else {
mAxisLabelPaint.setTextAlign(Paint.Align.RIGHT);
mLabelOutlinePaint.setTextAlign(Paint.Align.RIGHT);
xPos = mViewPortHandler.contentRight() - xoffset;
}
}

drawYLabels(c, xPos, positions, yoffset);
}

/**
* draws the y-labels on the specified x-position
*
* @param fixedPosition
* @param positions
*/
protected void drawYLabels(Canvas c, float fixedPosition, float[] positions, float offset) {

final int from = mYAxis.isDrawBottomYLabelEntryEnabled() ? 0 : 1;
final int to = mYAxis.isDrawTopYLabelEntryEnabled()
? mYAxis.mEntryCount
: (mYAxis.mEntryCount - 1);

// draw
for (int i = from; i < to; i++) {

String text = mYAxis.getFormattedLabel(i);

if (mHasStroke) {
c.drawText(text, fixedPosition, positions[i * 2 + 1] + offset, mLabelOutlinePaint);
}
c.drawText(text, fixedPosition, positions[i * 2 + 1] + offset, mAxisLabelPaint);
}
}
}
131 changes: 131 additions & 0 deletions ios/ReactNativeCharts/CustomYAxisRenderer.swift
@@ -0,0 +1,131 @@
//
// CustomYAxisRenderer.swift
// RNCharts
//
// Created by Taylor Johnson on 6/11/20.
//
import Foundation
import Charts
import SwiftyJSON

/**
* Adds support for rendering YAxis labels with outer stroke
*/
open class CustomYAxisRenderer : YAxisRenderer {
open var labelStrokeWidth: NSNumber?
open var labelStrokeColor = UIColor.white

public init(viewPortHandler: ViewPortHandler, yAxis: YAxis?, transformer: Transformer?, config: JSON)
{
super.init(viewPortHandler: viewPortHandler, yAxis: yAxis, transformer: transformer)
if config["strokeColor"].number != nil {
labelStrokeColor = RCTConvert.uiColor(config["strokeColor"].numberValue)
}
if config["strokeWidth"].number != nil {
labelStrokeWidth = config["strokeWidth"].numberValue
}
}

open override func renderAxisLabels(context: CGContext)
{
guard let yAxis = self.axis as? YAxis else { return }

if !yAxis.isEnabled || !yAxis.isDrawLabelsEnabled
{
return
}

let xoffset = yAxis.xOffset
let yoffset = yAxis.labelFont.lineHeight / 2.5 + yAxis.yOffset

let dependency = yAxis.axisDependency
let labelPosition = yAxis.labelPosition

var xPos = CGFloat(0.0)

var textAlign: NSTextAlignment

if dependency == .left
{
if labelPosition == .outsideChart
{
textAlign = .right
xPos = viewPortHandler.offsetLeft - xoffset
}
else
{
textAlign = .left
xPos = viewPortHandler.offsetLeft + xoffset
}

}
else
{
if labelPosition == .outsideChart
{
textAlign = .left
xPos = viewPortHandler.contentRight + xoffset
}
else
{
textAlign = .right
xPos = viewPortHandler.contentRight - xoffset
}
}

drawYLabels(
context: context,
fixedPosition: xPos,
positions: transformedPositions(),
offset: yoffset - yAxis.labelFont.lineHeight,
textAlign: textAlign)
}

/// draws the y-labels on the specified x-position
open func drawYLabels(
context: CGContext,
fixedPosition: CGFloat,
positions: [CGPoint],
offset: CGFloat,
textAlign: NSTextAlignment)
{
guard
let yAxis = self.axis as? YAxis
else { return }

let labelFont = yAxis.labelFont
let labelTextColor = yAxis.labelTextColor

let topLabelIndex = yAxis.entryCount - 1

let from = yAxis.isDrawBottomYLabelEntryEnabled ? 0 : 1
let topLabelPositon = positions[topLabelIndex].y + offset

let to = yAxis.isDrawTopYLabelEntryEnabled && topLabelPositon >= viewPortHandler.contentTop ? yAxis.entryCount : (yAxis.entryCount - 1)

for i in stride(from: from, to: to, by: 1)
{
let text = yAxis.getFormattedLabel(i)

if (labelStrokeWidth != nil) {
ChartUtils.drawText(
context: context,
text: text,
point: CGPoint(x: fixedPosition, y: positions[i].y + offset),
align: textAlign,
attributes: [.font: labelFont, .strokeColor: labelStrokeColor, .strokeWidth: labelStrokeWidth as Any]
)
}

ChartUtils.drawText(
context: context,
text: text,
point: CGPoint(x: fixedPosition, y: positions[i].y + offset),
align: textAlign,
attributes: [.font: labelFont, .foregroundColor: labelTextColor]
)
}
}


}
2 changes: 2 additions & 0 deletions ios/ReactNativeCharts/RNBarLineChartViewBase.swift
Expand Up @@ -26,13 +26,15 @@ class RNBarLineChartViewBase: RNYAxisChartViewBase {

if json["left"].exists() {
let leftYAxis = barLineChart.leftAxis
barLineChart.leftYAxisRenderer = CustomYAxisRenderer(viewPortHandler: barLineChart.viewPortHandler, yAxis: leftYAxis, transformer: barLineChart.getTransformer(forAxis: YAxis.AxisDependency.left), config: json["left"])
setCommonAxisConfig(leftYAxis, config: json["left"]);
setYAxisConfig(leftYAxis, config: json["left"]);
}


if json["right"].exists() {
let rightAxis = barLineChart.rightAxis
barLineChart.rightYAxisRenderer = CustomYAxisRenderer(viewPortHandler: barLineChart.viewPortHandler, yAxis: rightAxis, transformer: barLineChart.getTransformer(forAxis: YAxis.AxisDependency.right), config: json["right"])
setCommonAxisConfig(rightAxis, config: json["right"]);
setYAxisConfig(rightAxis, config: json["right"]);
}
Expand Down