ninox023 Posts - Answer Overflow

ninox023

•Created by ninox023 on 1/16/2025 in #❓・help

How config the HighChart with nuxt ui-Theme?

I’m working with Highcharts and Nuxt UI. How can I apply the Nuxt UI style through the plugins/highcharts.client.js file? Is it possible to use the color mode here—especially for switching between dark and white (light) themes? Below is my current highcharts.client.js:

import Highcharts from 'highcharts';
import HighchartsVue from 'highcharts-vue';


export default defineNuxtPlugin((nuxtApp) => {
    console.log('Highcharts plugin loaded'); // Debugging-Log

    Highcharts.setOptions({
        chart: {
            // styledMode: true,
            backgroundColor: '#f0f0f0', // Hintergrundfarbe
            style: {
                fontFamily: 'Arial, sans-serif' // Schriftart
            }
        },
        title: {
            style: {
                color: '#333333',
                fontSize: '20px'
            }
        },
        xAxis: {
            labels: {
                style: {
                    color: '#333333',
                    fontSize: '12px'
                }
            }
        },
        yAxis: {
            labels: {
                style: {
                    color: '#333333',
                    fontSize: '12px'
                }
            },
            title: {
                style: {
                    color: '#333333',
                    fontSize: '14px'
                }
            }
        },
        tooltip: {
            backgroundColor: 'rgba(255, 255, 255, 0.85)',
            style: {
                color: '#333333',
                fontSize: '12px'
            }
        },
        plotOptions: {
            series: {
                dataLabels: {
                    style: {
                        color: '#333333',
                        fontSize: '12px'
                    }
                }
            }
        }
    });

    nuxtApp.vueApp.use(HighchartsVue);
});

22 replies

NNuxt

•Created by ninox023 on 1/15/2025 in #❓・help

How to Right-Align Cell Content in a UTable?

I want to right-align the content of specific cells in a UTable. When I add class: "text-right" to a column definition, it only aligns the column header but not the cell content. For example:

const columns = [
  { key: "kostartebene1", label: "Kostart", sortable: true, direction: "asc" },
  { key: "1", label: "Jan", class: "text-right" },
  { key: "2", label: "Feb" },
  { key: "3", label: "Mrz" },
  { key: "4", label: "Apr" },
  { key: "5", label: "Mai" },
  { key: "6", label: "Jun" },
  { key: "7", label: "Jul" },
  { key: "8", label: "Aug" },
  { key: "9", label: "Sep" },
  { key: "10", label: "Okt" },
  { key: "11", label: "Nov" },
  { key: "12", label: "Dez" },
];

Only the header text is right-aligned. How can I also align the cell content to the right?

5 replies

NNuxt

•Created by ninox023 on 6/11/2023 in #❓・help

Passing data with NuxtLink

Is it possible to pass existing data to a site using NuxtLink? I receive customer data via API, which I display in a table. To access customers' subscriptions, I want to use NuxtLink to point to a subsequent page. The forwarding works, but I would also like to forward the subscription data in order to access them. Is there a way to do this without fetching the data again?

3 replies

Gaming

Programming