[Manoj Mohan]

@myezasifiso,

Stripline values doesn’t get updated even if it gets outside the viewport region upon zooming / panning.

If you could brief us more about your requirements, we can understand the scenario better and try to help you fulfill the same.

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

AmoN,

You are passing values instead of y within $dataPoints. Replacing $dataPoints[0] = array("value" => $row["values"], "label"=> $row["date(timestamp)"]) with $dataPoints[0] = array("y" => $row["values"], "label"=> $row["date(timestamp)"]) should work fine in this case.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@nehamahajan,

In order to wrap the tooltip content after a certain width, you need to first check the width of the tooltip content by creating a dummy DOM element. To get the tooltip content, you can use updated event of tooltip. If the width exceeds max-width i.e. 200px in your case, you can add css property to tooltip and it’s child elements to control the width of it. Please refer to below code snippet.

.
.
toolTip: {
    updated: function(e) {
      var width = getToolTipWidth(e.content);
      if(width > 199) {
      	jQuery(".canvasjs-chart-tooltip").addClass("custom-tooltip-width");
        jQuery(".canvasjs-chart-tooltip .content").addClass("wordwrap");
      } else {
      	jQuery(".canvasjs-chart-tooltip").removeClass("custom-tooltip-width");
        jQuery(".canvasjs-chart-tooltip .content").removeClass("wordwrap");
      } 
    }
}
.
.
function getToolTipWidth(content) {
  var validationDom = document.createElement("div");   // Create a <button> element
  validationDom.innerHTML = content; 
  validationDom.style.display = "inline-block";// Insert text
  validationDom.style.maxWidth = "200px";// Insert text
  document.body.appendChild(validationDom);
  toolTipWidth = jQuery(validationDom).width();
  validationDom.remove();
  return toolTipWidth;
}

Also, please refer to this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@nehamahajan,

What you observe on the chart:
1) The color of the data point is red which is series 1.
2) The color of the line is blue which is series 2.

I need to understand why is that so, and how do we make datapoint also have color blue which is of series 2?

In the JSFiddle you have shared, you are using lineColor which changes the color of line not the marker(dataPoint). To change the marker color as well, you can set the markerColor. In your case, you can use color property to set the color of both line and marker. Whenever there are multiple series overlapping each other, the last series will be shown and on hovering the marker will be shown for first dataSeries.

Also what I want to achieve is:
1) When i hover over the data point, since it is series 1 how do we make other series (in our example series 2) with less opacity and series 1 with more opacity.
2) The example has only 2 series, but we can have multiple series and only the highlighted series should have a greater opacity as compared to others.

I suggest you to use legend to hide and unhide the dataSeries whenever there are series overlapping each other.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

Nicolas,

We achieve the tooltip syncing using updated event and showAtX method of tooltip. Whenever tooltip of any chart is updated, the updated event of tooltip for that respective chart is called and we use e.entries[0].xValue i.e. dataPoint x value to display tooltip at respective x value on every chart. In the example you have shared, the chart 2 there is no dataPoint between 10 and 60 because of which updated event passes x value as 10 or 60 to display other charts based on mouse movement.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@usha,

Chart animates on initial / 1st call of render only as of now. In the reference JSFiddle example, the chart gets animated when the section of the chart container comes within the viewport. The example that you have shared above contains the chart container within the initial viewport itself because of which chart will render instantly when the page is loaded.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@keval-panchal,

Sorry, it is not possible to show tooltip for axis label as of now. However you can show tooltip for legend with the help of itemmouseover and itemmouseout event of legends as shown in this code snippet.

.
.
.
legend: {
    cursor:"pointer",
    fontSize: 15,
    itemmouseover: function(e){
      showLegendToolTip(e.x, e.y, e.dataSeries.legendLongText);
    },
    itemmouseout: function(e) {
      hideLegendToolTip();
    }
}
.
.
.
for(var i=0; i<chart.options.data.length; i++) {
  chart.options.data[i].legendLongText = chart.options.data[i].legendText;
  chart.options.data[i].legendText = chart.options.data[i].legendLongText.slice(0, 10);
}

chart.render();
jQuery("#chartContainer").append("<div class='custom-legend-tooltip'></div>");
var customToolTipLegend = jQuery(".custom-legend-tooltip");

jQuery(".custom-legend-tooltip").on("mouseout", hideLegendToolTip);

function showLegendToolTip(x, y, text) {
  customToolTipLegend.text(text);
  customToolTipLegend.css({left: x, top: y})
  customToolTipLegend.removeClass("hide");
}

function hideLegendToolTip() {
  customToolTipLegend.addClass("hide");
}

Please take a look at this JSFiddle for complete working code on the same.

Also, you can show tooltip for legend by creating custom legends (DOM) and add title attribute to it. Please check out the code snippet below.

//Add custom-legends as list and attach click event to that
var legendListId = document.getElementById("legendList");
customLegends(chart,legendListId);
chart.render();

function customLegends(chart, legendListId){
  for(var i=0; i < chart.options.data.length; i++){	
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(chart.options.data[i].legendText.slice(0, 10)));
    li.title = chart.options.data[i].legendText;
    legendListId.appendChild(li); 
    chart.options.data[i].showInLegend = false;
    li.style.color = chart.options.data[i].color ? chart.options.data[i].color : chart.get("selectedColorSet")[i];
    $('li').each(function (i) {
      $(this).attr('id', (i));
    });
  }

  //Add click event to Custom-Legends being clicked
  $('li').click(function (event) {    		
    var index = $(this).index();
    var x = document.getElementById(index);   
    if (typeof (chart.options.data[index].visible) === "undefined" || chart.options.data[index].visible) {
      chart.options.data[index].visible = false;
    } else {
      chart.options.data[index].visible = true;
    }
    chart.render();
  });  
}

Check out this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@pimohdaimaoh,

You need to parse the text file to the format accepted by CanvasJS. Please take a look at this below code snippet for the same.

function handleFiles() {
  var fileList = this.files;
  var reader = new FileReader();

  reader.readAsText(fileList[0]);
  reader.onload = function() {
    renderChart(reader);
  }
  
}

function renderChart(reader) {
  var dpsList = reader.result;  
  var dataPoint;
  var dps1= [], dps2 = [], dps3 = [];
  
  dpsList = dpsList.split("\n");
    
  for(var i = 1; i < dpsList.length; i++) {
  	var separateData = dpsList[i].split(" ");
  	yVal = parseFloat(separateData[4]);
        xVal = new Date(parseInt(separateData[0]), parseInt(separateData[1]));
    
    chart.options.data[0].dataPoints.push({x: xVal, y: yVal});  
    chart.options.data[1].dataPoints.push({x: xVal, y: yVal});  
  }
  
  chart.render();
}

Also, check out this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@soudoplatoff,

Can you 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, try out in different servers and help you out? Also, can you brief us about server details in which you are facing the issue?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@soudoplatoff,

Charts seems to be working fine with bootstrap cards as shown in this JSFiddle. If you are still facing the 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]

Nicolas,

tooltip.showAt() shows the tooltip for specified x value passed as parameter not to nearest x value. In order to show tooltip to nearest x value, you can find the nearest x value and pass it in showAt method to display it. Please take a look at below code snippet for showing tooltip for nearest x value.

function getNearestXValues(xVal, dps1) {
	
	return [].concat(dps1).sort(function(a, b) {
    var diffA = Math.abs(xVal - a.x);
    var diffB = Math.abs(xVal - b.x);
    return diffA - diffB; // sort a before b when the distance is smaller
	})[0].x;

}

function showTooltip(e) {
  for( var i = 0; i < charts.length; i++){
    if(charts[i] != e.chart) {
    	charts[i].toolTip.showAtX(getNearestXValues(e.entries[0].xValue, charts[i].data[0].dataPoints));
    }
      
  }
}

Also, check out this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ebrewer,

Sorry, adding line break to axis labels is not possible as of now.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@van-rebosura,

Displaying labels at a specific position(say every midnight) on the axes depends upon the very first label that is rendered, subsequent labels are just rendered at a defined interval(auto-calculated/user-defined) from there. As of now, we do not have control over the starting label on the axes. However in your case, you can show axis labels by passing the year as numeric value instead of datetime as shown in this code snippet.

dataPoints: [
  { x: 2020, y: 71, label: "label 1" },
  { x: 2021, y: 55, label: "label 2" },
  { x: 2022, y: 50, label: "label 3" },
  { x: 2023, y: 65, label: "label 4" },
  { x: 2024, y: 95, label: "label 5" },
  { x: 2025, y: 68, label: "label 6" },
  { x: 2026, y: 28, label: "label 7" },
  { x: 2027, y: 34, label: "label 8" },
  { x: 2028, y: 14, label: "label 9" }
]

Also, take a look at this JSFiddle for an updated example.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@dollarb71,

You can categorize your data based on month and add an index for corresponding month to each datapoints. Please take a look at the code snippet below.

for(var i=0; i<csvData.length; i++) {
  var csvLines = csvData[i];
  if(!technicianData[csvLines.label]) {
    technicianData[csvLines.label] = [];
  }

  if(typeof months[csvLines.month] === "undefined") {
    months[csvLines.month] = monthIndex;
    monthIndex += 1;
  }
  technicianData[csvLines.label].push({ "label" : csvLines.month, y: csvLines.y, x: months[csvLines.month]});
}

var data = [];

for (var technician in technicianData ) {
  if (!technicianData.hasOwnProperty(technician)) continue;
  data.push({"name": technician, dataPoints: technicianData[technician]})
}

Also, check out this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

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

Considering this thread as duplicate of React itemClick with Boolean (JSFiddle given) and hence closing the same.

—-
Manoj Mohan
Team CanvasJS