[Thangaraj Raman]

@shwetabolaj,

You can use the Range Selector in StockCharts to control the range of data being shown. Within the range selector, you can set the range and rangeType for range buttons to achieve your requirement.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@jimginn,

The format in which crosshair labels are rendered depends on various parameters like axis range. In your case, you can set the crosshair valueFormatString property as valueFormatString: "#,###.###" to achieve your requirement.

—
Thangaraj Raman
Team CanvasJS.

[Thangaraj Raman]

@rushikesh-gadekar,

CanvasJS React charts seem to be working fine with React Typescript. Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive so that we can look into your code, run it locally at our end to understand the scenario better, and help you out?

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@shruti-srivastava,

[Update]

We have released v3.5 GA with support for CSP. Please refer to the release blog for more information.

We have just released Chart v3.5 Beta-1 with a few improvements related to CSP. Please refer to the release blog for more information. Do download the latest version from download page & let us know your feedback.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@mustadirmahmood,

Stripline labels are positioned on top of the respective stripline and not on the line itself. In your case, the labels are getting overlapped due to the closeness of stripline values.

You can avoid the overlapping by showing some of the labels near to the axis and other labels either at the center or far from the axis using the labelAlign property. When stripline values are very close, you can set a different color for each stripline and also set the corresponding labelFontColor to differentiate each stripline and its label.

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@gittek,

You can scale-up or scale-down the chart before exporting using exportChart method and reset it back soon after exporting. Please take a look at this JSFiddle for a working example.

If the solution suggested doesn’t fulfill your requirement, kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive so that we can look into the code, understand the scenario better and help you out.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@m-usman,

You can customize a DIV using CSS to visualize the needle as shown in the code snippet below –

HTML
<div class="speedometer__needle js-needle"></div>

CSS

.speedometer__needle {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  top: 72%;
  left: 50%;
  transition: .3s ease-in-out;

To position the needle at a specific point you can use CSS transform property. Please check the code snippet below –

$( '.js-needle' ).css({
  'transform' : 'translate(-50%, -50%) rotate('+  (tickValue * 18.0) + 'deg)'
});

Please check this JSFiddle for a working example which meets your requirement.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@m-usman,

You can customize a DIV using CSS to visualize the needle as shown in the code snippet below –

HTML
<div class="speedometer__needle js-needle"></div>

CSS

.speedometer__needle {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  top: 72%;
  left: 50%;
  transition: .3s ease-in-out;

To position the needle at a specific point you can use CSS transform property. Please check the code snippet below –

$( '.js-needle' ).css({
  'transform' : 'translate(-50%, -50%) rotate('+  (tickValue * 18.0) + 'deg)'
});

Please check this JSFiddle for a working example which meets your requirement.

—
Thangaraj Raman
Team CanvasJS

• This reply was modified 2 years, 2 months ago by Thangaraj Raman.

[Thangaraj Raman]

@keval-panchal,

The dataPointWidth is auto calculated such that no column is overlapped in case of a single series or multi-series chart. In your case, you are setting the dataPointWidth manually which makes the columns overlap with each other.

Please take a look at this updated JSFiddle for a working example.

Considering this thread as a duplicate of Bar Chart Overlapping Issue and hence closing the same.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@keval-panchal,

The dataPointWidth is auto calculated such that no column is overlapped in case of a single series or multi-series chart. In your case, you are setting the dataPointWidth manually which makes the columns overlap with each other.

Please take a look at this updated JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@ahadali791,

You can convert the x-values to labels and combine dataPoints with the same date using similar x-values. Please find the code snippet for the same below.

function setXValue(data) {
  var xValue = 0;
  for(var i = 0; i < data.length; i++) {
    if(data[i+1] && data[i].x.getTime() === data[i+1].x.getTime()) {
      data[i].label = data[i].x;
      data[i].x = xValue;
    }
    else {
      data[i].label = data[i].x;
      data[i].x = xValue;
      xValue++
    }
  }
  return data
}

Please take a look at this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@kerrith,

You can create a drilldown chart to achieve your requirement. Please take a look at this gallery page for an example on the same.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@ahadali791,

Can you kindly brief us further about your requirement along with a pictorial representation and also create a 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 look into your code, run it locally at our end to understand the scenario better, and help you out?

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@ragu1991nathan,

Chart renders dataseries in the same sequence in which they are passed to the chart-options. Passing the dataseries with red color before the dataseries with blue color should work fine in your case. Please take a look at this updated JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@mustadirmahmood,

To achieve your requirement, you can loop through the dataPoints and convert each y-value from millimeter to pixel as the chart is rendered based on pixels. Please take a look at this updated JSFiddle for a working example on the same.

—
Thangaraj Raman
Team CanvasJS