[Vishwas R]

@govind,

Can you kindly share JSFiddle with sample data and your use-case so that we can look into the code, understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@smarco,

I observe that you are performing AJAX request inside AJAX request within which you are creating chart (i.e. a new chart is created every 500ms). Instead, you can create chart once, update dataPoints every 500ms and re-render the chart. Please take a look at this updated code sample.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@trieucrew,

Sorry, highlighting the the filled area on selection is not possible as of now. However with the help of stripLines, you can highlight the entire section as shown in this sample project.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@intijk,

Can you kindly create JSFiddle reproducing the issue, so that we can look into the code, run it at our end to understand the scenario better and help you resolve.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@markpx,

Thanks for reporting the use-case, we will improve this behavior in future releases. You can work-around this issue by assigning all series to primary x-axis and using contentFormatter as shown in this updated pen.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@smithfx,

You can add stripline to the chart based on mousedown and mouseup events as shown in this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@wm,

It seems to be working fine. Please check this sample project in react-native, in which font-size of axisX labels is set to 25.

Can you kindly share sample project reproducing the issue you are facing along with the browser / steps that you used for the same, so that we can run it at our end, understand the issue better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@tilakbhanugmail-com,

The sample shared demonstrates an approach to achieve draggable chart with single dataSeries. However changing the logic to make it work with multi-series chart should work fine in this case.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@smithfx,

You can use stripLines to highlight the area according to your requirements.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@rosaisatbase,

You can update the chart option according to the drop-down value to achieve this. Please take a look at this JSFiddle which shows updating colorSet based on dropdown value.

If this doesn’t help you to fulfill your requirements, kindly share JSFiddle with sample data and brief us what do you mean by changing the content so that we can understand it better and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@tilakbhanugmail-com,

The solution seems to be working fine with all chart types including column, line, area charts.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@poojitha,

Can you kindly share pictorial representation and brief us more about your requirement, so that we can understand it better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

Michael,

You can customize the width of tooTip by adding style to ‘canvasjs-chart-tooltip’ class. Please take a look at this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@tilakbhanugmail-com,

To create a chart with draggable dataPoints you can attach event handlers to div with id "canvasjs-react-chart-container-0" in React so as to perform necessary actions when user clicks or drags inside the div as shown in the code snippet below:

$("#canvasjs-react-chart-container-0 > .canvasjs-chart-container").on({
  mousedown: function(e) {
    _this.mouseDown = true;
    _this.getPosition(e);  
    _this.searchDataPoint();
  },
  mousemove: function(e) {
    _this.getPosition(e);
    if(_this.mouseDown) {
      clearTimeout(_this.timerId);
      _this.timerId = setTimeout(function(){
        if(_this.selected != null) {
          chart.data[0].dataPoints[_this.selected].y = _this.yValue;
          chart.render();
        }   
      }, 0);
    }
    else {
      _this.searchDataPoint();
      if(_this.changeCursor) {
        chart.data[0].set("cursor", "n-resize");
      } else {
        chart.data[0].set("cursor", "default");
      }
    }
  },
  mouseup: function(e) {
    if(_this.selected != null) {
      chart.data[0].dataPoints[_this.selected].y = _this.yValue;
      chart.render();
      _this.mouseDown = false;
    }
  }
});

Please take a look at this Sample Project for a working example with sample code.

Considering this as duplicate of React CanvasJS: Drag Data Points and closing the thread.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@tilakbhanugmail-com,

Please take a look at this Sample Project.

Considering this as duplicate of React CanvasJS: Drag Data Points and closing the thread.

—
Vishwas R
Team CanvasJS