CODEWITHSUNDEEP
vue.jstoolbarapexcharts
Axel Bayle
Axel Bayle

Reputation: 77

Vue-apexcharts toolbar : selection tool not working

I created a line graph with vue apexcharts and I'm trying to enable the selection tool in the toolbar (as explain here :https://apexcharts.com/docs/options/chart/toolbar/ )

But even if I set :

selection: true,

It doesn't appear on the graph.

Here is my vue component :

<template>
  <div class="container">
    <apexchart :type="typechart" height="350" :options="options" :series="series"></apexchart>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import VueApexCharts from "vue-apexcharts";

Vue.component("apexchart", VueApexCharts);
@Component({
  components: { MyPlot }
})
export default class MyPlot extends Vue {
  witdhgraph: string = "500";
  typechart: string = "line";
  options: any = {
    chart: {
      id: "vuechart-example",
      toolbar: {
        show: true,
        offsetX: 0,
        offsetY: 0,
        tools: {
          download: true,
          selection: true,
          zoom: true,
          zoomin: true,
          zoomout: true,
          pan: true
        }
      },
      autoSelected: "selection"
    },
    stroke: {
      curve: "smooth"
    },
    colors: ["#00205b"],
    xaxis: {
      type: "numeric",
      categories: [
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23,
        24,
        25,
        26,
        27,
        28,
        29,
        30,
        31,
        32,
        33,
        34,
        35,
        36,
        37,
        38,
        39,
        40,
        41,
        42,
        43,
        44,
        45,
        46,
        47,
        48,
        49
      ]
    },
    annotations: {
      position: "back",
      xaxis: [
        {
          x: 28,
          x2: 32,
          strokeDashArray: 1,
          borderColor: "#c2c2c2",
          fillColor: "#c2c2c2",
          opacity: 0.3,
          offsetX: 0,
          offsetY: 0,
          label: {
            borderColor: "#c2c2c2",
            borderWidth: 1,
            borderRadius: 2,
            text: "test ",
            textAnchor: "middle",
            position: "top",
            orientation: "horizontal",
            offsetX: 0,
            offsetY: 0,
            style: {
              background: "#fff",
              color: "#777",
              fontSize: "12px",
              fontWeight: 400,
              fontFamily: undefined,
              cssClass: "apexcharts-xaxis-annotation-label"
            }
          }
        }
      ]
    }
  };
  series: any = [
    {
      name: "series-1",
      data: [
        67,
        93,
        4,
        39,
        31,
        62,
        39,
        4,
        63,
        51,
        28,
        73,
        75,
        80,
        47,
        17,
        6,
        55,
        36,
        18,
        85,
        64,
        99,
        21,
        100,
        14,
        18,
        12,
        70,
        44,
        44,
        87,
        8,
        37,
        72,
        67,
        20,
        7,
        5,
        33,
        36,
        41,
        30,
        30,
        88,
        31,
        47,
        77,
        74,
        35
      ]
    }
  ];
}
</script>

Upvotes: 1

Views: 1970

Answers (1)

junedchhipa
junedchhipa

Reputation: 5617

You also need to enable 

chart: {
  selection: {
    enabled: true
  }
}

This was not mentioned in the docs which have been corrected now: https://apexcharts.com/docs/options/chart/toolbar/#selection

Upvotes: 1

Related Questions