Search the Community

I am trying to prevent my treemap from drilling down. There does not seem a default method but am trying this and it does not seem to work, any idea? this.$refs.chart.chartObj.on('dataPlotClick', (e) => { e.preventDefault() })

Hi all, I'm trying to use the Vuejs component for fusioncharts. How do I must proceed ? I mean that I know there's a download function on your website : https://www.fusioncharts.com/vue-js-charts?framework=vue but it says this will be a trial. I have a licensed fusioncharts.js, how do I get the good version of Vuejs plugin ? Thank you

Hello. I have a AngularGauge chart with Vue.js. I configure gauge for dynamic resizing, like in manual. Code of my component: ``` <template> <div id="chart-container"> <fusioncharts :type="type" :width="width" :height="height" :data-format="dataFormat" :data-source="chartData" > </fusioncharts> </div> </template> <script> import { mapState } from "vuex"; export default { name: "AngularGauge", props: { dataValue: String, title: String, colorRange: Object }, computed: { ...mapState({ switchedTheme: state => state.switchedTheme }), chartData() { return { chart: { manageResize: "1", captionFont: "Roboto-Light", captionFontColor: this.switchedTheme ? "#262626" : "#ffffff", captionFontSize: "20", captionFontBold: "0", bgColor: this.switchedTheme ? "#ffffff" : "#262626", usePlotGradientColor: "1", pivotFillAlpha: "0", pivotBorderAlpha: "0", valueFont: "Roboto-Regular", valueFontSize: "40rem", valueFontColor: "#3F903E", valueBorderRadius: "3", valuePadding: "10", lowerLimit: this.colorRange.minRangeValue, upperLimit: this.colorRange.maxRangeValue, lowerLimitDisplay: this.colorRange.minRangeValue, upperLimitDisplay: this.colorRange.maxRangeValue, showValue: this.dataValue, valueBelowPivot: "1", theme: "fusion" }, colorRange: { color: [ { minvalue: this.colorRange.low.minvalue, maxvalue: this.colorRange.low.maxvalue, code: "#3B953A" }, { minValue: this.colorRange.middle.minvalue, maxValue: this.colorRange.middle.maxvalue, code: "#E3A402" }, { minValue: this.colorRange.max.minvalue, maxValue: this.colorRange.max.maxvalue, code: "#C22424" } ] }, dials: { dial: [ { radius: 165, baseWidth: 145, baseRadius: 25, topWidth: 1, rearExtension: 0, value: this.dataValue, valueY: 213, bgColor: this.switchedTheme ? "#006FBA" : "#793DC0" }, { radius: 132, baseWidth: 148, bgColor: this.switchedTheme ? "#ffffff" : "#262626", borderAlpha: 0, baseRadius: 25, topWidth: 40, rearExtension: 2, value: this.dataValue, showValue: "0" } ] }, annotations: { origw: 500, origh: 272, autoscale: "1" } }; } }, data() { return { type: "angulargauge", renderAt: "chart-container", width: "100%", height: "100%", dataFormat: "json" }; } }; </script> <style> #chart-container { position: relative; width: 100%; height: 100%; } </style> ``` I added width and height for component in percents. And added menageResize: "1", autoScale: "1". But when I resize a page, AngularGauge only change your width. Height didn't change at all. In console I have this errors: ``` fusioncharts.js?8f68:13 Error: <path> attribute d: Expected number, "MNaN,NaNQ0,0,NaN,…". e._setFillAndStroke @ fusioncharts.js?8f68:13 ``` How can I fix this problem ?