highcharts / highcharts-vue

Other
686 stars 150 forks source link

missing funnel? #183

Closed jhm37 closed 3 years ago

jhm37 commented 3 years ago

Am I missing something for the funnel?

<template>
  <div>
    <highcharts :options="chartNewUserFunnel"></highcharts>
  </div>
</template>
<script>
import { Chart } from "highcharts-vue";
export default {
  components: {
    highcharts: Chart
  },
  props: {
    filters: {
      type: Object,
      default: function() {
        return null;
      }
    }
  },
  data: function() {
    return {
      showLoader: true,
      chartNewUserFunnel: {
        chart: {
          type: "funnel"
        },
        title: {
          text: ""
        },
        plotOptions: {
          series: {
            dataLabels: {
              enabled: true,
              format: "<b>{point.name}</b> ({point.y:,.0f})",
              softConnector: true
            },
            center: ["40%", "50%"],
            neckWidth: "30%",
            neckHeight: "25%",
            width: "80%"
          }
        },
        legend: {
          enabled: false
        },
        series: [
          {
            name: "Unique users",
            data: [
              ["Website visits", 15654],
              ["Downloads", 4064],
              ["Requested price list", 1987],
              ["Invoice sent", 976],
              ["Finalized", 846]
            ]
          }
        ],
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500
              },
              chartOptions: {
                plotOptions: {
                  series: {
                    dataLabels: {
                      inside: true
                    },
                    center: ["50%", "50%"],
                    width: "100%"
                  }
                }
              }
            }
          ]
        }
      }
    };
  }
};
</script>
jhm37 commented 3 years ago

Got it!

<template>
  <div>
    <highcharts :options="chartNewUserFunnel"></highcharts>
  </div>
</template>
<script>
import { Chart } from "highcharts-vue";
import Highcharts from 'highcharts'
import highchartsMore from 'highcharts/highcharts-more'
import highchartsFunnel from 'highcharts/modules/funnel'

highchartsMore(Highcharts);
highchartsFunnel(Highcharts);

export default {
  components: {
    highcharts: Chart
  },
  props: {
    filters: {
      type: Object,
      default: function() {
        return null;
      }
    }
  },
  data: function() {
    return {
      showLoader: true,
      chartNewUserFunnel: {
        chart: {
          type: "funnel"
        },
        title: {
          text: ""
        },
        plotOptions: {
          series: {
            dataLabels: {
              enabled: true,
              format: "<b>{point.name}</b> ({point.y:,.0f})",
              softConnector: true
            },
            center: ["40%", "50%"],
            neckWidth: "30%",
            neckHeight: "25%",
            width: "80%"
          }
        },
        legend: {
          enabled: false
        },
        series: [
          {
            name: "Unique users",
            data: [
              ["Website visits", 15654],
              ["Downloads", 4064],
              ["Requested price list", 1987],
              ["Invoice sent", 976],
              ["Finalized", 846]
            ]
          }
        ],
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500
              },
              chartOptions: {
                plotOptions: {
                  series: {
                    dataLabels: {
                      inside: true
                    },
                    center: ["50%", "50%"],
                    width: "100%"
                  }
                }
              }
            }
          ]
        }
      }
    };
  }
};
</script>