[Vishwas R]

This feature is not available as of now.

[Vishwas R]

Jacob,
Its ‘e.chart.options.axisY2.maximum’. Kindly check the screenshot you have added, it has field called options.

[Vishwas R]

We were not able to reproduce the issue yet on Win7 + Chrome 49. Does your system have any graphic card installed? If yes, which model. Also, can you try restarting the machine once and see if it is still reproducible.

[Vishwas R]

Dilip,

Kindly provide the operating system and browser being used along with their versions, so that we can have a look at the issue and help you out.

[Vishwas R]

Dilipt,

I reproduced your code in jsfiddle, its working fine and labels are shown in chart. Here is the fiddle for the same.

[Vishwas R]

For axis labels, tooltip is not supported. Instead you can use toolTip for dataSeries so that long names are displayed when user hover the dataPoints.

[Vishwas R]

Jacob,

The issue has been fixed and here is an internal-build. Kindly check if its working and let us know.

[Vishwas R]

Yes viewportMinimum and viewportMaximum works with candlestick charts.

• This reply was modified 8 years, 9 months ago by Vishwas R.

[Vishwas R]

Haggis,

Thanks for the additional information. It will help us in figuring out the issue. We will investigate on this and get back.

[Vishwas R]

Jacob,

We looked into the log file and it seems like it gives a constant value,11, for y-value. But the screenshot you have uploaded has values less than that at every point.

It would be better is you can reproduce the issue you are facing in a fiddle, so that we can understand your issue properly.

[Vishwas R]

Haggis,

Thanks for reporting. Seems like the issue is only in Safari and we haven’t been able to figure out the problem yet. We will investigate on this further and get back.

[Vishwas R]

xkater,

It is possible to change/update axis’s range by using viewportMinimum and viewportMaximum properties of axisX. I think you can implement the required behavior using these two properties.

Here is an example with a slider – you might have to customize it slightly though.

If this doesn’t fit your requirement, any pictorial representation or fiddle would be helpful to understand your requirement and help you out.

[Vishwas R]

Aviran,

We checked your issue, we tried debugging it locally. Kindly make few changes to get it work. Instead of using window.onload, use $(document).ready. And before loading jquery.canvasjs (js file), load jquery file.

Here is the working code-snippet:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="http://ticket-compare.com/wp-content/themes/ticket-compare/js/jquery.canvasjs.min.js"></script>
  <script type="text/javascript">
$(document).ready(function() {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Price History, In Pounds"             
      }, 
      animationEnabled: true,     
      axisY:{
        titleFontFamily: "arial",
        titleFontSize: 12,
        includeZero: false
      },
      toolTip: {
        shared: true
      },
	  data: [
	  	        {   
			  
        type: "spline",  
        name: "ticketbis",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 254.02},     
        {label: "7-02-16", y: 264.99},     
        {label: "8-02-16", y: 264.99}, 
        {label: "9-02-16", y: 290.00}, 
        {label: "10-02-16", y: 285.00},     
        {label: "11-02-16", y: 369.00},     
        {label: "12-02-16", y: 329.30}        
		]
      },
	  	        {   
			  
        type: "spline",  
        name: "livefootball",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 237.50},     
        {label: "7-02-16", y: 237.50},     
        {label: "8-02-16", y: 237.50}, 
        {label: "9-02-16", y: 237.50}, 
        {label: "10-02-16", y: 237.50},     
        {label: "11-02-16", y: 0},     
        {label: "12-02-16", y: 469.25}        
		]
      },
	  	        {   
			  
        type: "spline",  
        name: "Kix",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 220},     
        {label: "7-02-16", y: 220},     
        {label: "8-02-16", y: 220}, 
        {label: "9-02-16", y: 320}, 
        {label: "10-02-16", y: 320},     
        {label: "11-02-16", y: 320},     
        {label: "12-02-16", y: 320}        
		]
      },
	  	        {   
			  
        type: "spline",  
        name: "Sports Events 365",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 357},     
        {label: "7-02-16", y: 356},     
        {label: "8-02-16", y: 356}, 
        {label: "9-02-16", y: 357}, 
        {label: "10-02-16", y: 363},     
        {label: "11-02-16", y: 404},     
        {label: "12-02-16", y: 410}        
		]
      },
	  	        {   
			  
        type: "spline",  
        name: "FootballTicketpad",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 823.53},     
        {label: "7-02-16", y: 823.53},     
        {label: "8-02-16", y: 823.53}, 
        {label: "9-02-16", y: 823.53}, 
        {label: "10-02-16", y: 941.18},     
        {label: "11-02-16", y: 0},     
        {label: "12-02-16", y: 47.07}        
		]
      },
	  	        {   
			  
        type: "spline",  
        name: "HotFootballTickets",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 290},     
        {label: "7-02-16", y: 324},     
        {label: "8-02-16", y: 314}, 
        {label: "9-02-16", y: 330}, 
        {label: "10-02-16", y: 330},     
        {label: "11-02-16", y: 402},     
        {label: "12-02-16", y: 402}        
		]
      },
	  	        {   
			  
        type: "spline",  
        name: "guaranteetickets",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 299.71},     
        {label: "7-02-16", y: 299.71},     
        {label: "8-02-16", y: 300.10}, 
        {label: "9-02-16", y: 300.88}, 
        {label: "10-02-16", y: 308.65},     
        {label: "11-02-16", y: 305.72},     
        {label: "12-02-16", y: 305.72}        
		]
      },
	  	        {   
			  
        type: "spline",  
        name: "ticket2",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 465.34},     
        {label: "7-02-16", y: 463.92},     
        {label: "8-02-16", y: 463.92}, 
        {label: "9-02-16", y: 464.01}, 
        {label: "10-02-16", y: 464.01},     
        {label: "11-02-16", y: 503.68},     
        {label: "12-02-16", y: 503.57}        
		]
      },
	  	  ],
      legend:{
        cursor:"pointer",
        itemclick:function(e){
          if(typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
          	e.dataSeries.visible = false;
          }
          else {
          	e.dataSeries.visible = true;            
          }
          chart.render();
        }
      }
    });

chart.render();
});
</script>
  

  </div>
<div id="chartContainer" style="height: 100%; width: 100%; padding-bottom: 45%;"></div>
</div>

[Vishwas R]

Aviran,

Upon checking the URL that you have shared, we observed an error in console – ‘$ is not a function’. This means a jQuery function is called before jQuery (js file) is loaded. Kindly check and load jQuery before using jQuery functionality,

If you are using CanvasJS jQuery plugin, please load jQuery before loading CanvasJS jQuery plugin as it has dependency. Please refer to this documentation page for tutorial and live examples on using jQuery plugin. Also please refer to jQuery Gallery for more examples with different sets of use-cases that you can edit in-browser or download to run locally.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Basu,

If you are using column or bar chart types, you can set color to multiple dataSeries . Here is an example. And if it is for line chart, you can set multiple dataSeries as shown in this example to achieve it