You must be logged in to post your query.
Home › Forums › Chart Support › Z-scaling when changing values – Not working
Tagged: z-scaling
Hi, Im using a bubble chart and the scaling from the Z-axis is totaly wrong. I’m using React and I’m changing the data a lot and everything works but the Z-scaling. These are the functions that is probably interesting for you. I can’t display all info and will not be able to showcase a jsfiddle because of nda.
componentWillReceiveProps (nextProps) { if (!this.chart) return if (this.props.title !== nextProps.title) { this.chart.options.title.text = nextProps.title } if(!deepEqual(this.props.data , nextProps.data)){ this.chart.options.data = nextProps.data } if(!deepEqual(this.props.xAxis, nextProps.xAxis)){ this.chart.options.axisX = nextProps.xAxis } if(!deepEqual(this.props.yAxis, nextProps.yAxis)){ this.chart.options.axisY = nextProps.yAxis } if((this.props.title !== nextProps.title)){ this.chart.options.title = nextProps.title } console.log("options right now:",this.chart.options) this.chart.render() } componentDidMount(){ this.chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, zoomEnabled: true, theme: "light", title: this.props.title, axisX: this.props.xAxis, axisY:this.props.yAxis, data:this.props.data, }); this.chart.render(); } render() .... const data = [{ type: "bubble", showInLegend: true, legendText:legendText, ---- a text that is changed legendMarkerType: "circle", legendColor:"gray", // indexLabelOrientation: "horizontal", toolTipContent: toolTip, ---- changes dataPoints: dataPoints --- changes }]
The example data
{x: 10, y: 960, z: 12300, } {x: 10, y: 880, z: 12300, } {x: 21, y: 1880, z: 16500,}
How this data is displayed in the chart. Also notible is that each {} comes from when a uses selects a item so they are added separatly.
https://ibb.co/k8CCGd
@slotmachine,
The z-scaling of the largest bubble, depends on the z-scaling of the smallest bubble. If you have a reference dataPoint, which is considerably small compared to the remaining dataPoints, you can notice the actual difference in size among the dataPoints.
You can add a dummy/reference dataPoint and setting the color: "transparent", toolTipContent: null, will make the dummy dataPoint invisible/ inactive. Please take a look at this jsfiddle, which has a reference dataPoint and reads user’s data from external JSON.
color: "transparent", toolTipContent: null
__ Priyanka M S Team CanvasJS
Perfect you solved my problem :)
const referenceZscaling = {x:xMin , y: yMin, z: zdiff, name: "referenceZ", color: "transparent", toolTipContent: null} const data = [{ type: "bubble", showInLegend: true, legendText:legendText, legendMarkerType: "circle", legendColor:"gray", toolTipContent: toolTip, dataPoints: [referenceZscaling,...dataPoints] }]
You must be logged in to reply to this topic. Login/Register