[Manoj Mohan]

@wellhys,

You can render the second chart on clicking datapoints from the first chart using conditional rendering and react state. Please take a look at the code snippet below.

{this.state.clicked && <CanvasJSChart
  options={options} 
/>}

Also, check out this StackBlitz for an example with complete code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@kinokatsu,

To display indexLabel only for specific index value (in your case 1), you can check the index of the indexLabel in indexLabelFormatter function and display the same. Please take a look at the code snippet below.

indexLabelFormatter: function ( e ) {
          if(e.index === 1 && e.dataPoint.dataPointLabel)
            return e.dataPoint.dataPointLabel;
          else
            return " ";
        }

Also, take a look at this JSFiddle for complete code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@kpandey017,

It is not possible to show pie slices when all the dataPoints has 0 value as of now. However, you can achieve similar functionality by changing chart type to doughnut, pushing one extra dataPoint with non-zero y-value and setting innerRadius to 99% as shown in the code snippet below

function checkForZeroDps(chart) {
  var isDpsZero = false;
  for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
    if(chart.options.data[0].dataPoints[i].y === 0) {
      isDpsZero = true;
    }
  }
  if(isDpsZero) {
    chart.options.data[0].type = "doughnut";
    chart.options.data[0].innerRadius = "99%";
    chart.options.data[0].dataPoints.push({
      y: 0.000001,
      indexLabel: " ",
      indexLabelLineThickness: 0,
      toolTipContent: null
    });
  }
}

Please take a look at this JSFiddle for complete code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@guybrush,

Please take a look at this gallery page for an example on rendering PHP Chart with data from database.

If you are still facing issue, kindly create sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with sample database so that we can run it locally at our end to understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@aapril98,

There are couple of issues in the JSFiddle that you have shared

1. You are passing label2 and y2 instead of label and y in dataPoins2 array. Please replace $dataPoints2[] = array("label2"=>$row['Status'], "y2"=>$row['Total']); with $dataPoints2[] = array("label"=>$row['Status'], "y"=>$row['Total']);

2. In the JSFiddle shared above, you have used multiple window.onload event handler where as there can be only one window.onload event handler in a page. You need to move all slider related functions and chart related code (initialize/updating chart options) inside the window.onload event handler. Also, instead of creating chart on switching the slider every time, you can create the chart instance once and update chart options/data based on slider index. Please take a look at the code snippet below for the same.

window.onload = function() {
  var dataPoints1 = <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>, 
      dataPoints2 = <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>;

  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    legend:{
      verticalAlign: "bottom",
      horizontalAlign: "center"
    },
    data: [{
      indexLabel: "{label} ({y} people)",
      yValueFormatString: "#,##0.\"\"",
      indexLabelFontSize: 17,
      indexLabelFontFamily: "Garamond",
      indexLabelFontColor: "black",
      indexLabelLineColor: "black",
      indexLabelPlacement: "outside",
      type: "pie",
      showInLegend: true,
      legendText: "{label}",
      dataPoints: dataPoints1
    }]
  });
  chart.render();

  var slideIndex = 1;
  showSlides(slideIndex);

  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {slideIndex = 1}    
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";

    if(slideIndex == 1) {
      chart.options.dataPoints = dataPoints1;
    } else {
      chart.options.dataPoints = dataPoints2;
    }
    chart.render();

  }
}

Please refer to this StackOverflow thread for more information on adding multiple functions to the window.onload event handler.

If you are still facing issue, kindly create sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with sample data so that we can run it locally at our end to understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

[Update]

@radam13,

We have released v3.2.12 GA with this bug fix, please check out release blog for more information. Please download the latest version from our download page and let us know your feedback.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

Thamizharasan,

Can you kindly brief us your requirement along with some example or pictorial representation so that we can understand your scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@wellhys,

Glad that you figured it out :)

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ekaqu1028,

rangeChanged event handler for stockchart are called whenever any individual chart’s range is changed by zooming/panning as well as on changing range using navigator and slider. rangeChanged event handler of individual charts are called on zooming/panning the particular chart. Also, rangeChanged event of individual charts will be called first and then of stockchart when there is a change in the range of individual charts.

You can check out this JSFiddle to check how rangeChanged event handler is called for individual charts and stockcharts.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@mbringezu,

One of our representatives will get in touch with you over email :)

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@nerviozzo96,

It seems to be happening due to programmatically zooming and resetting the charts. We will look into it further. However, you can hide toolbar on resizing the window or on hiding dataSeries by adding below function toggleToolBarDisplay which displays and hides the toolbar. The function toggleToolBarDisplay hides the toolbar whenever chart is in reset state.

function toggleToolBarDisplay() {
  var toolBar = document.getElementsByClassName("canvasjs-chart-toolbar");
  for(var i=0; i<toolBar.length; i++) {
    toolBar[i].style.display = resetFlag ? "none" : "block";
  }
}

Also, Please take a look at this JSFiddle for complete code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

[Update]

@kondor0,

We have released v3.2.11 GA with this bug fix, please check out release blog for more information. Please download the latest version from our download page and let us know your feedback.

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@wellhys,

If you looking to set the minimum and maximum value of x-axis of individual chart with date-time axis, you can achieve it by setting the minimum and maximum property of axisX in charts. Please check out the below code snipppet for same.

{
	.
	.
	charts: [{
		axisX: {
			minimum: new Date(2018, 00, 01, 09, 30),
			maximum: new Date(2018, 03, 01, 09, 30)
		},
		.
		.
	}]
}

Setting the minimum and maximum of slider sets the range of all charts and synchronise them. Please check out the below code snippet for the same.

{
	.
	.
	navigator: [
		slider: {
			minimum: new Date(2018, 00, 01, 09, 30),
			maximum: new Date(2018, 03, 01, 09, 30)
		},
		.
		.
	]
}

To specify hour component, you can pass the datetime value along with time component like new Date(2018, 00, 01, 09, 30) to minimum and maximum values. For more information on passing time component within date-time values, please refer to this MDN documentation.

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@raghav-son,

To reduce space between title of one y-axis with the other y-axis line, you can set the margin property of axisY to 0.

axisY: {
	margin: 0
}

Please take a look at this JSFiddle for a complete code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@radam13,

Thanks for reporting the use-case.

I’m guessing it’s because I may have a multi-line label. But, wondering what I can do to get around it. Heck, if I can add line break characters I would be happy to do that.

Sorry, it is not possible to add line break characters in indexLabel as of now.

Note, on the JSFiddle, the first column shows when the chart is 0 and the text is a few pixels in the line. The second column shows a 3-line label and the last line is in the column area.

We will reconsider this behaviour in our future releases.

—-
Manoj Mohan
Team CanvasJS