highstock stocktool toolbar not rendering as expected

[zhangyuz]

I am using Vue2, vuetify and latest highcharts-vue for a stock visualization web page, but stocktools bar not renderting as expected. I followed the guide here:https://www.highcharts.com/docs/stock/stock-tools

and my code as following:

// main.js
import Vue from 'vue';

import Highcharts from 'highcharts';
import Stock from 'highcharts/modules/stock';
import DarkUnica from 'highcharts/themes/dark-unica';
import IndicatorsAll from 'highcharts/indicators/indicators-all';
import DragPanes from 'highcharts/modules/drag-panes';
import AnnotationsAdvanced from 'highcharts/modules/annotations-advanced';
import PriceIndicators from 'highcharts/modules/price-indicator';
import FullScreen from 'highcharts/modules/full-screen';
import StockTools from 'highcharts/modules/stock-tools';

import HighchartsVue from 'highcharts-vue';

import App from './App.vue';
import router from './router';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;
Vue.use(HighchartsVue);

Stock(Highcharts);
DarkUnica(Highcharts);
IndicatorsAll(Highcharts);
DragPanes(Highcharts);
AnnotationsAdvanced(Highcharts);
PriceIndicators(Highcharts);
FullScreen(Highcharts);
StockTools(Highcharts);

new Vue({
  router,
  vuetify,
  render: (h) => h(App),
}).$mount('#app');

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
    <link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">

Is it possible highchart conflicts with vuetify? or am I doing something wrong? help needed 😩.

[Denyllon]

Hi @zhangyuz ,

Thanks for reporting the issue. As you mentioned in your report's description, it's most probably caused by the fact that the Stock GUI styles are in conflict with Vuetify, but it's hard to guess what exactly can cause the issue. I suggest you to debug the problem by inspecting the GUI elements, and taking a look on applied styles to find out which definition affects on them.

Anyway, could you provide me with the demo where the problems occurs?

[zhangyuz]

Hi, @Denyllon , you can find my demo code here: https://github.com/zhangyuz/quantz_deluge

[Denyllon]

Thank you for providing me with the repo. As I guessed, the problem is that the Vuetify's .v-application ul selector directly interferes the style of all native HTML elements (namely the <ul> in this case), and adds them padding-left: 24px.

You definitely need to consider redefining your styling within app.

[zhangyuz]

@Denyllon many thanks, I will try to fix it