Closed jhm37 closed 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>
Am I missing something for the funnel?