Forum Replies Created by Thangaraj Raman

Viewing 15 posts - 61 through 75 (of 226 total)
  • in reply to: Bar Chart #43539

    @saloni,

    You can use toolTipContent to display custom content in the tooltip or if you are looking to show some text over all the bars at once, you can use indexLabel.

    If this does not meet your requirement, kindly brief us further with a pictorial representation or an example so that we can understand your requirement better and suggest an appropriate solution.


    Thangaraj Raman
    Team CanvasJS

    in reply to: Chart not showing #43526

    @uncleboss12,

    Please check this documentation page for a step-by-step tutorial on integrating CanvasJS with your Vue application.

    If you are still facing issues, kindly create a sample project reproducing the issue and share it with us over Google Drive or OneDrive so that we can look into the code, run it locally to understand the scenario better, and help you out.


    Thangaraj Raman
    Team CanvaSJS

    in reply to: Integrate commercial CanvasJs via NPM #43511

    Ragu,

    The non-commercial version of CanvasJS is available over NPM as of now. You can download the commercial version package from My Account page and the steps to integrate have been addressed in the instruction.html file.


    Thangaraj Raman
    Team CanvasJS

    @haykay470,

    Can you kindly create a JSFiddle, reproducing the issue you are facing & share it with us so that we can look into the code / chart-options being used, understand the scenario better and help you out?


    Thangaraj Raman
    Team CanvasJS

    in reply to: Watermark #43450

    @arseneksa97,

    You can use subtitles to show a watermark in the plot area of the chart as shown in the code snippet below:

    subtitles: [{
        text: "Built using CanvasJS",
        fontSize: 40,
        verticalAlign: "center",
        dockInsidePlotArea: true,
        fontColor: "rgba(0,0,0,0.1)"
    }],

    Please check this JSFiddle for a working example.

    Chart with Watermark


    Thangaraj Raman
    Team CanvasJS

    in reply to: Show min and max value in half doughnut chart #43425

    @bkshn,

    You can add 2 dummy datapoints in the hidden region of the doughnut chart and use their indexlabels to show the minimum and maximum value of the gauge as shown in the code snippet below:

    var data = {
        type: "doughnut",
        indexLabelPlacement: "inside",
        innerRadius: "60%",
        dataPoints: [
          {
            y: 1,
            indexLabel: gauge.maximum + "",
            color: "transparent"
          },
          {
            y: gauge.maximum - 2,
            color: "transparent",
            toolTipContent: null
          },
          {
            y: 1,
            indexLabel: "0",
            color: "transparent"
          },
          gauge.data,
          gauge.unoccupied,
       ],
    };

    Please check this JSFiddle for a working example.

    Guage showing minimum and maximum values


    Thangaraj Raman
    Team CanvasJS

    in reply to: Show min and max value in half doughnut chart #43408

    @bkshn,

    A doughnut chart does not have axes. If you want to highlight the minimum and maximum values from the datapoint array, you can use subtitles to achieve the same.

    If this doesn’t meet your requirement, kindly share a pictorial representation and brief us further about your requirement so that we can understand your scenario better and help you out with an appropriate solution.


    Thangaraj Raman
    Team CanvasJS

    in reply to: 404 error when GETing /static/canvasjs.min.js #43392

    @lesliedewhurst01,

    We have tested the sample locally and it seems to be working fine on our end. It looks like you might have copied just the template(index.html) & missed out on replacing the view(views.py).

    Please take a look at this sample project for a working example. Replacing the trial version of the CanvasJS file (canvasjs.min.js) with the commercial version also seems to be working fine.

    If you are still facing issues, kindly help us with more information like errors in the console, the browser in which the problem occurs or steps to reproduce the issue, etc.


    Thangaraj Raman
    Team CanvasJS

    in reply to: Need a Gauge Chart #43352

    @chrisstone,

    We don’t have a gauge chart as of now but a semi-doughnut chart can be used to achieve the same. Please follow the steps below for creating a gauge chart using a doughnut chart.

    First, we need to create an object that will store all the necessary data that is needed to be shown on the gauge chart. The code snippet below shows an example of that object:

    var gauge = {
      title:{text: "Gauge Chart"},
      data: { y: 7 }, //gauge value 
      maximum: 10
    };

    In the second step, we will initialize the chart object and populate its dataPoints considering the fact that only half of the doughnut chart is displayed. Please refer to the code snippet below for achieving the same:

    var chart = new CanvasJS.Chart("chartContainer");
    createGauge(chart);
    
    //Function for gauge
    function createGauge(chart){
      //Caluculation of remaining parameters to render gauge with the help of doughnut
      gauge.unoccupied = {
        y: gauge.maximum - gauge.data.y, 
        color: "#DEDEDE", 
        toolTipContent: null, 
        highlightEnabled: false,
        click : function (){ gauge.unoccupied.exploded = true; }
      }
      gauge.data.click = function (){ gauge.data.exploded = true; };
      if(!gauge.data.color)
        gauge.data.color = "#69C434";
      gauge.valueText = {text: gauge.data.y.toString(), verticalAlign :"center"};
    
      var data = {
        type: "doughnut",
        dataPoints: [
          {
            y: gauge.maximum,
            color: "transparent",
            toolTipContent: null
          },
          gauge.data,
          gauge.unoccupied
        ],
      };
    
      if(!chart.options.data)
        chart.options.data = [];
      chart.options.data.push(data);
    
      if(gauge.title){
        chart.options.title = gauge.title;
      }
    
      //For showing value
      if(!chart.options.subtitles)
        chart.options.subtitles = [];
      chart.options.subtitles.push(gauge.valueText);
    
      chart.render();
    }

    Please take a look at this JSFiddle for a working example with sample code.

    Gauge Chart


    Thangaraj Raman
    Team CanvasJS

    @mnair,

    You can achieve your requirement by zooming into a particular region of the chart. To enable zooming in the chart, you will have to set zoomEnabled to true.


    Thangaraj Raman
    Team CanvasJS

    in reply to: Draw an arrow. #43181

    @kinokatsu,

    You can show an arrow over the last datapoint, by drawing out an arrow over the chart canvas with id .canvasjs-chart-canvas.

    Please check this JSFiddle for a working example.

    Drawing arrow over last datapoint


    Thangaraj Raman
    Team CanvasJS

    in reply to: Static tool tip icon #43179

    @ezsolve,

    You can use Unicode characters or emojis to render custom icons as index labels. Please check the code snippet below:

    indexLabel: "\u263A",  //Unicode smiling face
    
    OR
    
    indexLabel: "😊",  //smiling face emoji


    Thangaraj Raman
    Team CanvasJS

    in reply to: Want to use push to add two line plots #43156

    @ispybadguys,

    The datapoint object only accepts x and y values as of now. Your JSON can be in this format – {“x”:1687209355000,”y1″:10,”y2″:40}, however, you will have to parse the JSON data in the format accepted by CanvasJS and then pass them as datapoints to the chart. Please check the code snippet below:

    for(var i = 0; i < jsonData.length; i++) {
        chart.options.data[0].dataPoints.push({x: jsonData[i].x, y: jsonData[i].y1})
        chart.options.data[1].dataPoints.push({x: jsonData[i].x, y: jsonData[i].y2})
    }


    Thangaraj Raman
    Team CanvasJS

    in reply to: Remove a data point #43131

    @ispybadguys,

    You can remove a datapoint from the chart by using the array shift() method as shown in the code snippet below:

    chart.options.data[0].dataPoints.shift();
    chart.render();

    Please check this JSFiddle for a working example.


    Thangaraj Raman
    Team CanvasJS

    in reply to: Border to column chart #43096

    @mnair,

    Adding a border to the columns is not possible as of now. However, you can use an error chart in combination with a column chart and set whiskerThickness to 0 and stemThickness to a value slightly greater than the dataPointWidth to create a border around the columns.

    Please check this JSFiddle for a working example.

    Column chart with broders


    Thangaraj Raman
    Team CanvasJS

Viewing 15 posts - 61 through 75 (of 226 total)