JavaScript function

Question

I would like to stick the below into a function as I am currently calling it multiple times.

var chart = LightweightCharts.createChart(document.getElementById("chart"), {
    width: 250,
  height: 250,
    layout: {
        textColor: '#d1d4dc',
        backgroundColor: 'black',
    },
    localization: {
        priceFormatter: formatters[formatterNames[0]],
    },
  priceScale: {
        borderColor: 'rgba(255, 255, 255, 0.8)',
    },
    timeScale: {
    visible: false,
        borderColor: 'rgba(255, 255, 255, 0.8)',
    },
    priceScale: {
        scaleMargins: {
            top: 0.3,
            bottom: 0.25,
        },
    }, 
    grid: {
        vertLines: {
        color: 'rgba(255, 255, 255, 0.2)',
        },
        horzLines: {
            color: 'rgba(255, 255, 255, 0.2)',
        },
    },  
});

I thought I would add it into a function like this:

function Makechart (chartname){
LightweightCharts.createChart(document.getElementById(chartname), {
    width: 250,
  height: 250,
    layout: {
        textColor: '#d1d4dc',
        backgroundColor: 'black',
    },
    localization: {
        priceFormatter: formatters[formatterNames[0]],
    },
  priceScale: {
        borderColor: 'rgba(255, 255, 255, 0.8)',
    },
    timeScale: {
    visible: false,
        borderColor: 'rgba(255, 255, 255, 0.8)',
    },
    priceScale: {
        scaleMargins: {
            top: 0.3,
            bottom: 0.25,
        },
    }, 
    grid: {
        vertLines: {
        color: 'rgba(255, 255, 255, 0.2)',
        },
        horzLines: {
            color: 'rgba(255, 255, 255, 0.2)',
        },
    },  
});

and then call it by setting the variable as the function

Var chart1 =Makechart("chart1")
Ver chart2 =Makechart("chart1")

But the code is not running so I am doing something wrong but can't see what I am doing incorrectly.

Answer 1

You are missing the return keyword to return a value from the function.
If the chart wont initialize after then you should probably check your console for errors.

In the first example you select an element with the id of chart and in later examples chart1. Make sure that your element exists.

function Makechart(chartname) {
  return LightweightCharts.createChart(document.getElementById(chartname), {
    width: 250,
    height: 250,
    layout: {
      textColor: '#d1d4dc',
      backgroundColor: 'black',
    },
    localization: {
      priceFormatter: formatters[formatterNames[0]],
    },
    priceScale: {
      borderColor: 'rgba(255, 255, 255, 0.8)',
    },
    timeScale: {
      visible: false,
      borderColor: 'rgba(255, 255, 255, 0.8)',
    },
    priceScale: {
      scaleMargins: {
        top: 0.3,
        bottom: 0.25,
      },
    },
    grid: {
      vertLines: {
        color: 'rgba(255, 255, 255, 0.2)',
      },
      horzLines: {
        color: 'rgba(255, 255, 255, 0.2)',
      },
    }
  });
}