Home forums Using CanvasJS Z-scaling when changing values – Not working


This topic contains 2 replies, has 2 voices, and was last updated by  slotmachine 8 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #21372

    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 = new CanvasJS.Chart("chartContainer", {
          animationEnabled: true,
          zoomEnabled: true,
          theme: "light",
          title: this.props.title,
          axisX: this.props.xAxis,
      render() ....
      const data =   [{
          type: "bubble",
          showInLegend: true,
          legendText:legendText,  ---- a text that is changed
          legendMarkerType: "circle",
         // 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.




    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


    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,
          legendMarkerType: "circle",
          toolTipContent: toolTip,
          dataPoints: [referenceZscaling,...dataPoints]
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.