Forum Replies Created by Thangaraj Raman

Viewing 15 posts - 76 through 90 (of 226 total)
  • in reply to: Changing color of a pie slice #43042

    @xliff,

    You can change the color of a slice in the pie chart after it is rendered by updating the color of the corresponding datapoint in the chart options as shown in the code snippet below:

    chart.options.data[0].dataPoints[3].color = "red";
    chart.render();

    Please take a look at this documentation page for step-by-step tutorial on updating chart options.


    Thangaraj Raman
    Team CanvasJS

    in reply to: How to make the x-axis labels fixed #43031

    @mustadirmahmood,

    It is not possible to fix the x-axis to the top of the stockchart while scrolling through other charts in a stockchart as of now. However, you can position an overlayed canvas on top of the first chart and copy the x-axis to the overlayed canvas to achieve your requirement.

    Please check this updated JSFiddle for a working example.


    Thangaraj Raman
    Team CanvasJS

    in reply to: About adding bar chart #43029

    @appsoft,

    It is not possible to show the same chart in multiple places. However, you can create 2 different charts and pass the same set of chart options to them to achieve your requirement. Please take a look at this documentation page for a step-by-step tutorial on rendering multiple charts in a page.

    Please check this JSFiddle for a working example.


    Thangaraj Raman
    Team CanvasJS

    in reply to: Label clipped or invisible if longer than viewport #42967

    @vinay4422,

    By default, the chart avoids clipping labels on either end of the plot area through auto-labeling. In your case, the labels are getting clipped since you are setting viewportMinimum. You can overcome this by either not setting viewportMinimum or by setting viewportMinimum to a value smaller than the required viewport minimum.


    Thangaraj Raman
    Team CanvasJS

    in reply to: Static tool tip icon #42954

    @ezsolve,

    Each dataseries can have its own yValueFormatString since it is set at the dataseries level.

    You can use the toolTipContent property at the datapoint level to show custom information in the tooltip as shown in this updated JSFiddle.


    Thangaraj Raman
    Team CanvasJS

    in reply to: Static tool tip icon #42903

    @ezsolve,

    To render the equivalent of an info icon, you can add a scatter dataseries to the chart, and set an appropriate index label. The scatter points’ tooltip can be used to show any additional information as per your requirement.

    Please check this JSFiddle for a working example.

    StockChart with info icon


    Thangaraj Raman
    Team CanvasJS

    in reply to: can you provide me like aviator game chart #42800

    @coderohit,

    You can use an area chart and set fillOpacity to a minute value like 0.3 or 0.4 to reduce the transparency of the shaded area. To visualize the airplane image, you can position an image over the last datapoint to achieve your requirement.

    Please check this JSFiddle for a working example.

    Dynamic area chart with image as marker


    Thangaraj Raman
    Team CanvasJS

    in reply to: Bubble Chart using 1-Dimensional data #42792

    @rgaikwad,

    We do not have word cloud as of now.


    Thangaraj Raman
    Team CanvasJS

    in reply to: Error when using with RequireJS #42741

    @andynewby,

    We have just added CanvasJS Chart & StockChart packages to NPM registry. Now, you can add our charts & stockcharts to your application via NPM. Please refer to the release blog for more information. Please check out our NPM package and let us know your feedback.


    Thangaraj Raman,
    Team CanvasJS

    in reply to: CanvasJS NPM module #42729

    @himanshu_tanwar,

    We have just added CanvasJS Chart & StockChart packages to NPM registry. Now, you can add our charts & stockcharts to your application via NPM. Please refer to the release blog for more information. Please check out our NPM package and let us know your feedback.


    Thangaraj Raman,
    Team CanvasJS

    @elanchezhiyan,

    You can achieve zooming using mouse wheel by updating the viewportMinimum and viewportMaximum for both x-axis and y-axis based on the mouse position.

    Please check this JSFiddle for a working example.


    Thangaraj Raman
    Team CanvasJS

    in reply to: How do I Layer multiple years by month #42582

    @amiddleton,

    To display data by month for multiple years in the form of a stack you can use a stackedArea chart and set the fillOpacity for each dataseries to 0 if you just want to render the lines and not the shaded region below. In case you want to want to render both the line and the shaded area below with lesser transparency, you can set fillOpacity to a minute value like 0.1 or 0.2. We suggest you to use labels for the months instead of passing date-time values to x-value.

    Please check this JSFiddle for a working example.

    Stacked area chart for multiple years


    Thangaraj Raman
    Team CanvasJS

    @elanchezhiyan,

    You can zoom the chart using mousewheel by attaching wheel event to the chart. Please find the code snippet below.

    document.getElementsByClassName("canvasjs-chart-canvas")[1].addEventListener("wheel", function(e){
      e.preventDefault();
      
      if(e.clientX < chart.plotArea.x1 || e.clientX > chart.plotArea.x2 || e.clientY < chart.plotArea.y1 || e.clientY > chart.plotArea.y2)
      	return;
        
      var axisX = chart.axisX[0];
      var viewportMin = axisX.get("viewportMinimum"),
          viewportMax = axisX.get("viewportMaximum"),
          interval = axisX.get("minimum");
    
      var newViewportMin, newViewportMax;
    
      if (e.deltaY < 0) {
        newViewportMin = viewportMin + interval;
        newViewportMax = viewportMax - interval;
      }
      else if (e.deltaY > 0) {
        newViewportMin = viewportMin - interval;
        newViewportMax = viewportMax + interval;
      }
    
      if(newViewportMin >= chart.axisX[0].get("minimum") && newViewportMax <= chart.axisX[0].get("maximum") && (newViewportMax - newViewportMin) > (2 * interval)){
        chart.axisX[0].set("viewportMinimum", newViewportMin, false);
        chart.axisX[0].set("viewportMaximum", newViewportMax);
      }
    
    });

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

    Zoom chart using mousewheel


    Thangaraj Raman
    Team CanvasJS

    in reply to: I want to add % sign in yValueFormatString #42491

    @sain,

    Please check this documentation page for an example on using the yValueFormatString property and the different formatting options supported. Also, please take a look at this gallery page example of a pie chart with percentage values in the tooltip as well as indexlabel.

    In your case you can set yValueFormatString: "{y}%" if you want to show the value in percentage or yValueFormatString: "{y}'%'" if you want to add % symbol along with the current y-value.


    Thangaraj Raman
    Team CanvasJS

    in reply to: Axis X combines label with x value bug #42480

    @antosimi,

    You can set x-value along with y-value and labels sequentially starting from 0. In case a particular dataseries does not have datapoints for each x-value, you can skip them.

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

    Multiseries line chart with labels


    Thangaraj Raman
    Team CanvasJS

Viewing 15 posts - 76 through 90 (of 226 total)