Custom TradingView Style

GraphQL Tutorials
1

Floki TradingView Final
Floki TradingView Final1768×1060 20 KB

Final TradingView Chart

This is a simple tutorial going over how to customize the style of the TradingView widget. I’m not a professional coder by any means so extra emphasis on simple! For an in depth guide on how to implement TradingView with BitQuery, please check here.

Floki-TradingView-1
Floki-TradingView-11768×1232 22.4 KB

Initial TradingView Chart

For this tutorial, I created a simple TradingView widget that you can fork and adjust to your needs. It’s based off of Floki and WBNB. Out of the box, the TradingView chart style will appear as pictured above. In order to customize the look of the chart, you’ll need to edit the constants chart and candlestickSeries in the widget js. It will look similar to the following:

const chart = LightweightCharts.createChart(el, {
	timeScale: {
		timeVisible: true,
		secondsVisible: false,
	}
})
const candlestickSeries = chart.addCandlestickSeries()

The first thing we’ll do is adjust the size of the chart. We can do this by adding width and height to the chart.

const chart = LightweightCharts.createChart(el, {
	width: 828,
	height: 414,
	timeScale: {
		timeVisible: true,
		secondsVisible: false,
	}
})

Next we’ll change the layout colors. We do this by adding backgroundColor and textColor to the chart. Below I added a dark background color and light colored text. You can adjust the color to fit your needs.

const chart = LightweightCharts.createChart(el, {
	width: 828,
	height: 414,
	layout: {
		backgroundColor: '#181f25',
		textColor: '#dbe0e6',
	},
	timeScale: {
		timeVisible: true,
		secondsVisible: false,
	}
})

Now we’ll change the grid line colors. These lines can be changed with grid, rightPriceScale, and timeScale. The grid lines will affect the inner lines of the chart while rightPriceScale affects the y axis and timeScale affects the x axis. For my example, I made the inner grid lines a dull gray and the axis lines a brighter gray.

You’ll notice that I removed timeVisible and secondsVisible in timeScale. SecondsVisible toggles the date seconds when you hover over a data point. TimeVisible (default is true) affects whether or not the date shown is shown.

const chart = LightweightCharts.createChart(el, {
	width: 828,
	height: 414,
	layout: {
		backgroundColor: '#181f25',
		textColor: '#dbe0e6',
	},
	grid: {
		vertLines: {
			color: 'rgba(89, 114, 145, 0.75)',
		},
		horzLines: {
			color: 'rgba(89, 114, 145, 0.75)',
		 },
	},
	rightPriceScale: {
		borderColor: '#597291',
	},
	timeScale: {
		borderColor: '#597291',
	},
})

Finally, we’ll change the candlestick colors. This is done by adding various values to candlestickSeries. I’ve added upColor, downColor, borderDownColor, borderUpColor, wickDownColor, and wickUpColor. If you’re not sure which color goes with which I highly suggest changing the colors one at a time to something like red to see which area on the candlestick is affected.

const chart = LightweightCharts.createChart(el, {
	width: 828,
	height: 414,
	layout: {
		backgroundColor: '#181f25',
		textColor: '#dbe0e6',
	},
	grid: {
		vertLines: {
			color: 'rgba(89, 114, 145, 0.75)',
		},
		horzLines: {
			color: 'rgba(89, 114, 145, 0.75)',
		 },
	},
	rightPriceScale: {
		borderColor: '#597291',
	},
	timeScale: {
		borderColor: '#597291',
	},
})
const candlestickSeries = chart.addCandlestickSeries({
	upColor: '#de6449',
	downColor: '#181f25',
	borderDownColor: '#de6449',
	borderUpColor: '#de6449',
	wickDownColor: '#de6449',
	wickUpColor: '#de6449',
})

If you’d like to see more examples of custom TradingView styles, I highly recommend checking here. Just be sure the chart type fits the type you have (ie, candlestick vs areaseries). Hope this helps someone!