wuxudong / react-native-charts-wrapper

a react native charts wrapper (support android & iOS)
2.44k stars 657 forks source link

CandleStick Chart - Is can Possible edit xAxis/yAxis Labels & yAxis Color #900

Open pinokyov opened 1 year ago

pinokyov commented 1 year ago

Hello everyone, is there a way to edit xAxis/yAxis label values for candlestick chart and colors for yAxis?

<CandleStickChart
      style={{flex:1}}
      data={{
        dataSets: [{
          values: candles,
          label: "",
          config: {
            valueTextColor: processColor("#fff"),
            highlightColor: processColor("#CEB859FF"),
            textColor: "#fff",
            shadowColor: processColor("#adbae0"),
            shadowWidth: 2,
            shadowColorSameAsCandle: true,
            increasingColor: processColor("#71BD6A"),
            increasingPaintStyle: "FILL",
            decreasingColor: processColor("#D14B5A"),
          },
        }],
      }}
      marker={{
        enabled: false,
        markerColor: processColor("#2c3e50"),
        textColor: processColor("#adbae0"),
      }}
      legend={{
        enabled: false,
        textSize: 14,
        form: "CIRCLE",
        wordWrapEnabled: true,
      }}
      xAxis={{
        textColor: processColor("#fff"),

      }}
      yAxis={{
        textColor: processColor("#fff"),
      }}
      maxVisibleValueCount={16}
      autoScaleMinMaxEnabled={false}
      zoom={{ scaleX: scaleX, scaleY: scaleY, xValue: candles.length, yValue: 100, axisDependency: "LEFT" }}
      onSelect={handleSelect.bind(this)}
      chartDescription={{ text: "" }}
    />

image

darimuhittinhey commented 1 year ago

you can customize the colors of y axis values like this :

yAxis={{
          left: {
            textColor: processColor('red'),
          },
          right: {
            textColor: processColor('green'),
          },
        }}

and for customizing x labels i only know a way to change, its date format. u can use something like this :

xAxis={{
          valueFormatter: 'date',
          valueFormatterPattern: 'dd MMM',
        }}

and give timestamp values to x:

dataSets: [
            {
              values: [
                {
                  x: new Date(2021, 1, 1).getTime(),
                  // x: 1,
                  close: 83.46,
                  shadowH: 83.57,
                  shadowL: 83.3,
                  open: 83.53,
                },
                {
                  x: new Date(2021, 1, 2).getTime(),
                  // x: 2,
                  shadowH: 84.1,
                  shadowL: 83.5,
                  open: 84.1,
                  close: 83.72,
                },
                {
                  x: new Date(2021, 1, 3).getTime(),
                  // x: 3,
                  shadowH: 85,
                  shadowL: 84.3,
                  open: 84.36,
                  close: 84.8,
                },
                {
                  x: new Date(2021, 1, 4).getTime(),
                  // x: 4,
                  shadowH: 84,
                  shadowL: 83.2,
                  open: 83.87,
                  close: 83.61,
                },
                {
                  x: new Date(2021, 1, 5).getTime(),
                  // x: 5,
                  shadowH: 83.7,
                  shadowL: 83,
                  open: 83.67,
                  close: 83.62,
                },
              ],
              label: 'Data Set 1',
              config: {
                shadowColorSameAsCandle: true,
                increasingColor: processColor('green'),
                decreasingColor: processColor('red'),
                increasingPaintStyle: 'FILL',
                decreasingPaintStyle: 'FILL',
              },
            },
          ],