Home forums Using CanvasJS Pan button

Tagged: , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Sunil Urs 2 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #6368

    B.Bocian
    Participant

    Hi,
    I had problem with chart placed inside panel that was updated in partial postback so page was losing chart. I had to work around it somehow. I ended with this code that redraws the whole chart after each postback:

            
    function pageLoad() {
                var chartPlace = $('#<%=HiddenFieldChartVisible.ClientID %>').val();
                if (chartPlace == "visible") {
                    var chart = new CanvasJS.Chart("chartContainer",
                    {
                        zoomEnabled: true,
                        title: {
                            text: datapointscount + " Data Points! Zoom-in And Observe Axis Labels"
                        },
                        toolTip: {
                            content: function (e) {
                                var content;
                                content = e.entries[0].dataSeries.name + " <strong>" + e.entries[0].dataPoint.y;
                                return content;
                            },
                        },
                        axisX: {
                            labelAngle: -30
                        },
                        axisY: {
                            includeZero: false
                        },
                        data: data
                    });
                    chart.render();
                }
                /*})*/
            };
    

    But now because of this code after i hit Pan button it also redraws the whole chart. Is it possible to change Pan button configuration or at least remove Pan button from chart without interfering with your code

    #6369

    Sunil Urs
    Keymaster

    Bocian,

    But now because of this code after i hit Pan button it also redraws the whole chart. Is it possible to change Pan button configuration or at least remove Pan button from chart without interfering with your code

    Pan & Zoom buttons are one and the same – button’s text and functionality changes depending on the state. Hence via the API you can totally disable the zoom/pan feature or will to have both.

    But you might be able to work around it by setting display: none !important; for pan button. Pan button is the first-child of a div with class “canvasjs-chart-toolbar”

    Here is a jsfiddle that hides pan/zoom button in chart.


    Sunil Urs

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.