C
C
ceeed2021-07-07 22:22:26
Vue.js
ceeed, 2021-07-07 22:22:26

How do I disable the "First Y Data 1 - portfolio pnl" series by default in the chart?

I am using a vue plotting library. I need that by default when the chart was rebuilt, only the "First Y Data 2 - structure pnl" row would not be shown. I do not know how to do that. I re-read the documentation and it seems like I found this option there, but I may not be writing it that way .. Here is the documentation
https://apexcharts.com/docs/options/yaxis/

pnl"
Here is the plot of my component

<template>
  <div>
    <div id="chart">
      <h2 class="text-lg text-center font-semibold" v-if="title">
        {{ title }}
      </h2>

      <apexchart
        type="line"
        height="350"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </div>
  </div>
</template>

<script>
import VueApexCharts from "vue3-apexcharts";
export default {
  components: {
    apexchart: VueApexCharts,
  },
  props: {
    dataset: {
      type: Object,
      default: () => {},
    },
    title: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      series: [],
      chartOptions: {

        xaxis: {
           type: 'numeric',

          labels: {
            rotate: 0,
          },
        },
        theme: {
          palette: "palette7", // upto palette10
        },
        tickAmount: 'dataPoints',
      grid: {
    show: true,
    borderColor: '#90A4AE',
    strokeDashArray: 0,
    position: 'back',
    xaxis: {
        lines: {
            show: true
        }
    },   
    yaxis: {
        lines: {
            show: true
        }
    },  
    row: {
        colors: undefined,
        opacity: 0.5
    },  
    column: {
        colors: undefined,
        opacity: 0.5
    },  
    padding: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
    },  
},

      },

    };
  },

  watch: {
    title(val) {
      console.log("val", val);
    },

    dataset: {
      handler: function(newValue, oldVal) {
        console.log("nununununun", newValue);
        if (newValue && newValue["x"]) {
          let series = [
            {
              name: "First Y Data 1 - portfolio pnl",
              data: this.dataset["y_portf"].map((item, index) => {
                return {
                  x: this.dataset["x"][index],
                  y: item.toFixed(2),
                };
              }),
            },
            {
              name: "First Y Data 2 - structure pnl",
              data: this.dataset["y_struct"].map((item, index) => {
                return {
                  x: this.dataset["x"][index],
                  y: item.toFixed(2),
                };
              }),
            },
          ];
          
          this.series = series;
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped></style>

Answer the question

In order to leave comments, you need to log in

2 answer(s)
0
0xD34F, 2021-07-07
@ceeed

The corresponding setting was asked to be added, but to no avail . So it will have to be pinned down.
Add a link to the chart component:

<apexchart
  ref="chart"
  ...

After mounting, hide the excess:
mounted() {
  this.$nextTick(() => {
    this.$refs.chart.hideSeries('здесь имя набора данных, который не хотите показывать');
  });
},

I
Igor Vasiliev, 2022-01-30
@Isolution666

Hello.
Maybe I'm not on time, or no longer relevant, but you never know,
all of a sudden you need to hide the legends.
These are such explanations for the chart, a colored circle and an explanation
if you click on it, it will disappear from the category that was clicked
61f5b0c8b8c62018207064.jpeg
https://apexcharts.com/docs/options/legend/ - Documentation
To hide the legends, you need to specify this in the options:

legend: {
      show: false
},

You can manage legends like this:
https://codepen.io/junedchhipa/pen/YJQKOy?editors=0010
Maybe it will come in handy for someone.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question