Installation of the uPlot with Phoenix 1.6.6 and Phoenix live view 0.17.5

I am doing a course from Poetcoding for doing an app with Cryptocurrency by WebSockets and showing them with Phoenix Live View.
But I am trying to do the course with the new version( v1.6.6 ) of Phoenix by myself.
And I am facing problems when I tried to install the uPlot Javascript.
I installed the uPlot with esbuild wich is a different way of the tutorial wich was used the webpack.
I will tell now the steps I tried to do for the installation of the uPlot:
1 - I go for the folder assets and run the npm install uplot:
npm i uplot --save

so I saw in my package.json this:

  "scripts": {
    "deploy": "cd .. && mix assets.deploy && rm -f _build/esbuild"
  "dependencies": {
    "uplot": "^1.6.20"

my package.lock.json:

  "name": "assets",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
        "uplot": "^1.6.20"
    "node_modules/uplot": {
      "version": "1.6.20",
      "resolved": "",
      "integrity": "sha512-Jl4Z51Sns4xKLLQeBeiGdcgv4eW1UkKwukSTndIP3YcnlU4za9qGhejlX+XzRbvjaB32C0pxRsdq8m8Gwbq1Eg=="
  "dependencies": {
    "uplot": {
      "version": "1.6.20",
      "resolved": "",
      "integrity": "sha512-Jl4Z51Sns4xKLLQeBeiGdcgv4eW1UkKwukSTndIP3YcnlU4za9qGhejlX+XzRbvjaB32C0pxRsdq8m8Gwbq1Eg=="

2 - I created the chart.js file and tried to do the logs for the mounted, beforeUpate, updated, etc… and all was working very well. But when I tried to import the CSS and the Javascript of the uPlot my app begins to show a simple and white web interface like without the frontend, like don’t have CSS.

my chart.js file :

import _css from 'uplot/dist/uPlot.min.css'
import uPlot from "uplot"

let ChartHook = {
  mounted() {
    this.trades = [];
    this.plot = new uPlot(plotOptions(), [[], []], this.el);
  updated() {
    let price = parseFloat(this.el.dataset.price),
      timestamp = parseInt(this.el.dataset.tradedAt)

      timestamp: timestamp, price: price

    if(this.trades.length > 20) {
      this.trades.splice(0, 1)

  updateChart() {
    let x = => t.timestamp);
    let y = => t.price);
    this.plot.setData([x, y]);

function plotOptions() {
  return {
    width: 200, height: 80, 
    class: "chart-container",
    cursor: {show: false}, 
    select: {show: false}, 
    legend: {show: false},
    scales: {},
    axes: [
      {show: false},
      {show: false}
    series: [
        size: 0,
        width: 2,
        stroke: "white",
        fill: "rgb(45,85,150)",

export { ChartHook }

the chart component:

<div class="chart-component">
   <div phx-hook="Chart"
        id={ "product-chart-#{to_string(@product)}" }
        data-price={ @trade.price }
        data-traded-at={ DateTime.to_unix(@trade.traded_at, :millisecond) }
      <div class="chart-container"></div>

I am thinking it was the import of the CSS in the chart.js file because I saw something about the esbuild to not put the import of the app.css file in the app.js for something.
I would like to have a help for this. What I need to do for continue working on this project?
I need to do the steps for install the uPlot in a different way?
My app on github

Since esbuild is not responsible for the CSS in this project, the import has to take place from within an scss file, such as app.scss.

I was able to get this working in the project by adding --load-path=../assets/node_modules to the dart_sass config’s args property in config.exs, like this:

config :dart_sass,
  version: "1.49.11",
  default: [
    args: ~w(css/app.scss ../priv/static/assets/app.css --load-path=../assets/node_modules),
    cd: Path.expand("../assets", __DIR__)

Followed by an import of the css at the top of app.scss:

@use "uplot/dist/uPlot.min.css";
@import "./phoenix.scss";
@import "./poeticoins.scss";

I don’t know why it has to be an @use, but @import did not work.

In the end, the charts render like this:

Screen Shot 2022-05-04 at 7.50.55 AM

Hopefully this helps!


This worked, thank you very much @ChristianAlexander!
I think this @import not worked because the file of the uPlot is a CSS file and before this problem I installed the DartSass and it was needed to change the extension .css for .scss of the @import phoenix.scss file to work.

1 Like