Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Using 3rd party library in widgets


Hello,

I am trying to import charts from TradingView, and I am using the Laravel template,
I installed library with npm install --save lightweight-charts

Then I created widget in widgets.bundle.js file,

var initChart = function() {

const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };
const chart = createChart(document.getElementById('firstChart'), chartOptions);


But this function can not get a reference to createChart from lightweight-chart,

It throws below error,


widgets.bundle.js:19485 Uncaught ReferenceError: createChart is not defined
at initChart (widgets.bundle.js:19485:23)
at Object.init (widgets.bundle.js:19526:13)
at HTMLDocument.<anonymous> (widgets.bundle.js:19538:21)


How can we combine this?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

Hi Jigar,

I apologize for the delay in my response. To resolve the issue, you should import the required plugin from the node_modules directory. You can find guidance on how to do this by examining the /resources/mix/plugins.js file. By observing how other plugins are imported there, you should gain a better understanding of how to import libraries from the node_modules folder into your project.

This should help you properly integrate the createChart function from the lightweight-charts library into your widget script.

If you encounter any further difficulties, please don't hesitate to ask for additional assistance.

Thanks

Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(