chart doesn't pick the font family?? #1685

ajaythxkur · 2024-08-28T07:01:22Z

ajaythxkur
Aug 28, 2024

i am using light weight chart in my project in next js app.
layout.ts
const font = League_Spartan({ subsets: ['latin'], weight: "400" })<body className={font.className}>
chart.ts
`"use client";

import { useEffect, useMemo, useRef } from "react";
import { AreaData, Time, createChart } from 'lightweight-charts'
import _ from "lodash";
import dayjs from "dayjs";
import { ITokenOffer } from "@/utils/tokenApi";
interface ChartProps {
offers: ITokenOffer[],
isChartHidden: boolean
}
export function Chart({ offers, isChartHidden }: ChartProps){
const chartRef = useRef(null)
const chartData = useMemo(() => {
const seriesData: AreaData[] = _.map(offers, (offer) => {
return {
time: dayjs(offer.createdAt).unix() as Time,
value: offer.usdtPrice,
}
})
return seriesData
}, [offers])
useEffect(() => {
if (!chartRef.current) {
return
}
const chartOptions = {
layout: {
textColor: '#FFFFFFB2',
background: { color: '#171717' },
// fontFamily: '__League_Spartan_1ac841 __League_Spartan_Fallback_1ac841', // Add the font here
},
grid: {
vertLines: { color: '#17291700' },
horzLines: { color: '#FFFFFF33' },
},
handleScroll: {
mouseWheel: false, // Disable scrolling with mouse wheel
pressedMouseMove: false, // Disable scrolling with mouse drag
},
handleScale: {
axisPressedMouseMove: false,
mouseWheel: false, // Disable scaling with mouse wheel
pinch: false, // Disable scaling with pinch/zoom gesture
},
}

    const chart = createChart(chartRef.current, chartOptions)

    chart.applyOptions({
      watermark: {
        visible: true,
        fontSize: 48,
        horzAlign: 'center',
        vertAlign: 'center',
        text: 'Legends Trade',
        color: '#ffffff15', 
      },
      rightPriceScale: {
        scaleMargins: {
          top: 0.3,
          bottom: 0.25,
        },
      },
      crosshair: {
        horzLine: {
          visible: false,
          labelVisible: false,
        },
        vertLine: {
          labelVisible: false,
        },
      },
      grid: {
        vertLines: {
          visible: false,
        },
        horzLines: {
          visible: false,
        },
      },
    })
    const areaSeries = chart.addAreaSeries({
      lineColor: '#00ff1a',
      topColor: '#172917',
      bottomColor: '#1729175b',
    })

    areaSeries.setData(chartData)

    chart.timeScale().fitContent()

    return () => {
      chart.remove()
    }
  }, [chartData, isChartHidden])
return(
    <div id="chartbox" ref={chartRef} className={`${isChartHidden ? 'mobile-active' : ''}` }></div>
)

}`

why does it not pick the default font family for app? if not is there any other way to change it?? same for watermark

Answered by ajaythxkur

Aug 28, 2024

Nvm, this sorts out the thing
layout: { textColor: '#FFFFFFB2', background: { color: '#171717' }, fontFamily: font.style.fontFamily, },

View full answer

ajaythxkur · 2024-08-28T07:41:29Z

ajaythxkur
Aug 28, 2024
Author

Nvm, this sorts out the thing
layout: { textColor: '#FFFFFFB2', background: { color: '#171717' }, fontFamily: font.style.fontFamily, },

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chart doesn't pick the font family?? #1685

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

chart doesn't pick the font family?? #1685

ajaythxkur Aug 28, 2024

Replies: 1 comment

ajaythxkur Aug 28, 2024 Author

ajaythxkur
Aug 28, 2024

ajaythxkur
Aug 28, 2024
Author