Z-scaling when changing values – Not working

[slotmachine]

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

[Priyanka M S]

@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.

__
Priyanka M S
Team CanvasJS

[slotmachine]

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]
    }]