Noman
Noman

Reputation: 699

how to show these y-axis values in formatting of KMB

enter image description here

import React, { useEffect, useState } from 'react'
import { CubeProvider, useCubeQuery } from '@cubejs-client/react'
import { cubejsApi } from '@/services/cube'
import dynamic from 'next/dynamic'
import moment from 'moment'
const DualAxes = dynamic(
  () => import('@ant-design/plots').then((mod) => mod.DualAxes),
  { ssr: false }
)

const DemoDualAxes = () => {
  const [chartData, setChartData] = useState([])
  const [date, setDate] = useState('This quarter')
  const { resultSet, error, isLoading } = useCubeQuery(
    {
      measures: [
        'market_data.grad_signal',
        'market_data.total_crypto_mcap'
      ],
      timeDimensions: [
        {
          dimension: 'market_data.date',
          granularity: 'day',
          dateRange: date
        }
      ],
      order: {
        'market_data.date': 'asc'
      }
    },
    {
      cubejsApi
    }
  )

  

  useEffect(() => {
    if (error) {
      console.log('Error', error)
    }
    if (resultSet) {
      const formattedData = resultSet?.loadResponse?.results[0]?.data.map(
        (item) => ({
          date: moment(item['market_data.date'].split('T')[0]).format('DD-MMM-YY'),
          grad_signal: parseInt(item['market_data.grad_signal']),
          total_crypto_mcap: parseInt(item['market_data.total_crypto_mcap'])
        })
      )
      setChartData(formattedData)
    }
  }, [resultSet, error, isLoading])

  const config = {
    data: [chartData, chartData],
    xField: 'date',
    yField: ['grad_signal', 'total_crypto_mcap'],
    height: 383,
    theme: {
      styleSheet: {
        fontFamily: 'DM Sans, sans-serif'
      }
    },
    geometryOptions: [
      {
        geometry: 'line',
        lineStyle: { lineWidth: 2 },
        color: '#1947C8'
      },
      {
        geometry: 'line',
        lineStyle: { lineWidth: 2 },
        color: '#F17742'
      }
    ],
    xAxis: {
      type: 'cat'
    },
    legend: {
      position: 'bottom',
      itemName: {
        style: {
          fontSize: 14, // Customize the font size
          fontFamily: 'DM Sans, sans-serif' // Customize the font family
        }
      },
      // Customize the legend margin
      layout: 'horizontal', // or 'vertical'
      offsetY: 8 // Vertical margin
    }
  }

  return (
    <div >
      <DualAxes {...config} className="w-full" />
    </div>
  )
}

export default DemoDualAxes

here is my code I tried my best to show these labels in KMB I got but chart renders incorrect then I am using antV charts and their configuration is a little tricky because mostly things are in Chinese so its difficult to get it. i am using cube js you can provide your own data and fields for x-axis and y-axis

Upvotes: 1

Views: 23

Answers (0)

Related Questions