[Sachin Bisht]

@mridula,

Can you kindly share an example or a pictorial representation of your requirements, so that we can understand it better and help you out?

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@suraj,

Range bar chart can be used to achieve your requirement.

Kindly take a look at this JSFiddle for the working code.

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@siradelaide,

You can parse the JSON data from your server and render it to the chart. Please check the code snippet below:

function parseJSON(jsonData) {
    var dataPoints = [];
    for(var i=0; i<jsonData.length; i++){
      var label = jsonData[i].SensorName;
      var yValue = parseFloat(jsonData[i].SensorValue);
      dataPoints.push({label: label, y: yValue})
    }
    chart.options.data[0].dataPoints = dataPoints;
    chart.render();
}

Please take a look at this JSFiddle for an example on the same.

—
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@meenasiva,

You can combine range area chart with the corresponding axis x and y values to have a background color in the grid cells.

Please take a look at this JSFiddle for an example on the same.

__
Sachin Bisht
Team CanvasJS

[Sachin Bisht]

@emin500,

React charts seem to be working fine with typescript. Please take a look at this Stackblitz code for a working example.

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

__
Sachin Bisht
Team CanvasJS