[Vishwas R]

@ayankhan21,

Are you referring to the axis ticks? If so, you can remove the hyphen next to the axis labels by setting the tickLength to 0. This will hide the ticks completely. If you’re referring to something else, could you please share a pictorial representation so that we can understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

Adam Evans,

Updating legendText on hovering over the datapoint should work fine as per your requirements. Please find the code-snippet below.

mouseover: onMouseover(e){	
    e.dataSeries.legendText = (e.dataSeries.dataPoints[e.dataPointIndex].x + ": " + e.dataSeries.dataPoints[e.dataPointIndex].y).toString();
    e.chart.render();
}

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

—
Vishwas R
Team CanvasJS

[Vishwas R]

@discovered1086,

The chart is currently taking 100% of the container’s width and seems to be working fine. Could you please create a JSFiddle (or Stackblitz for React/Angular apps) that reproduces the issue & share it with us so that we can look into the code, understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@dunhamcd,

In a logarithmic scale, the axis labels represent powers of logarithmBase – defaults to 10 (1, 10, 100, etc.) instead of linear increments due to how logarithmic values work. Using a linear scale may better suit your needs if you prefer different label increments like 1, 2, 3,…

—
Vishwas R
Team CanvasJS

[Vishwas R]

@scompliance,

In case of React Charts, you can set the height and width of the chart-container by passing it as containerProps as shown in the code-snippet below.
<CanvasJSChart options={options} containerProps={{ width: '100%', height: '300px' }} />

Please refer to React Charts documentation for more information.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@scompliance,

You can change the thickness of the line by updating endValue within rangeChanged event as shown in code-snippet below.

rangeData[1].endValue = new Date(rangeData[1].startValue.getTime() + (e.chart.axisX[0].viewportMaximum - e.chart.axisX[0].viewportMinimum) / e.chart.axisX[0].bounds.width * 3);

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

—
Vishwas R
Team CanvasJS

[Vishwas R]

@scompliance,

You seem to have missed out updating your code, code related to accepting stripline bounds from chart is missing in the Stackblitz you have shared. Updating it seems to be working fine. Please take a look at this updated Stackblitz for working example.

Also, in case of range-area chart adding range-area series with 2 datapoints with minor difference in the time component should work fine for single value as-well. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@scompliance,

You seem to have replaced App.jsx code with Chart.jsx code in the Stackblitz link that you have shared. Either you can use stripline in this case as shown in the previous reply or you can use range-area chart instead of stripline. The advantage of using range-area chart in this scenario includes letting library to show tooltip, mouse-events & showing series in legend. Please take a look at this JSFiddle for an example of the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@scompliance,

Tooltip for stripline is not available as of now. In the current case of zooming / panning, the solution shared earlier can be improved further by checking if the current-mouse coordinate is within the plotarea bounds or not along with existing conditions as shown in the code-snippet below.

xPos >= stripLine.chart.plotArea.x1 && xPos <= stripLine.chart.plotArea.x2 && yPos >= stripLine.chart.plotArea.y1 && yPos <= stripLine.chart.plotArea.y2

Please take a look at this updated Stackblitz for working code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@scompliance,

Checking if the startValue & endValue lies within the axis range should work fine in this case. Please find the code-snippet for the same below.

stripLine.startValue < stripLine.chart.axisX[0].viewportMaximum && stripLine.endValue > stripLine.chart.axisX[0].viewportMinimum

Please take a look at this updated Stackblitz for working code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@scompliance,

You can add tooltip to Stripline based on length of dataseries as shown in the code-snippet below.

if (chart.data && chart.data.length > 0) {
  addTooltipToStripline(chart.axisX[0].stripLines[0], 'Stripline 1');
}

Please take a look at this updated Stackblitz for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@guyverix,

One of our representatives from sales team will get in touch with you soon. For more information on licensing please contact sales@canvasjs.com

—
Vishwas R
Team CanvasJS

[Vishwas R]

@scompliance,

Datapoint click event is not getting fired as image placed on top of datapoint captures the event. Bypassing pointer-events & toggling display property between “none” and “block” on datapoint click should work fine in this case.

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

—
Vishwas R
Team CanvasJS

[Vishwas R]

@scompliance,

You can get the axis properties like minimum, maximum, etc. in useEffect hook as show in the code-snippet below.

useEffect(() => {
  chart.axisX[0].addTo('stripLines', {
    startValue: chart.axisX[0].get('minimum'),
    endValue: chart.axisX[0].get('maximum'),
    color: 'rgba(221, 160, 221, 0.1)',
  });
}, []);

You can add stripline as plotarea background once you have access to axis range properties. Please take a look at this Stackblitz for an example of the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@scompliance,

Please take a look at this Stackblitz link for an example on adding tooltip to Stripline in React, same as JSFiddle shared earlier.

—
Vishwas R
Team CanvasJS