CODEWITHSUNDEEP
angulartypescriptchart.jsng2-charts
Niv
Niv

Reputation: 41

Hiding unused axis in ng2-charts

I'm using two Y axes (right and left) When I hide all the used datasets for one of them, the ticks (Axis labels) turn to 1 to -1.

I want to to hide the axis or the labels when it is not used, any ideas?

Before Hiding: Both Y Axes used

After Hiding: Right Y-Axis Changed - Not used

Options>Scales:

        yAxes: [
            {type: "linear", id: "y-axis-0", display: true, position: "right",gridLines:{display: false},
            scaleLabel:{display: true, labelString: 'mBar'}},
            {type: "linear", id: "y-axis-1", display: true, position: "left",ticks: {beginAtZero:true},
            scaleLabel:{display: true, labelString: 'Knots/°C'} }
          ]

Didn't find anything in the documentation.

Upvotes: 4

Views: 4910

Answers (2)

RAHUL KHARBANDA
RAHUL KHARBANDA

Reputation: 51

   If you want to remove the x axis and y axis data so to do that you need 
        to use scales and put in bar-chart-demo.ts file and inside export
          class you have to paste like that what  i mentioned below 
             and it worked . 

 public barChartOptions:any = {
  scaleShowVerticalLines: false,
     animation: false,
     scaledisplay:false,
     responsive: true,

scales: {
   xAxes: [
    {
        display: false
    }
  ],
   yAxes: [
      {
        display: false
    }
]
}


   };``

Upvotes: 5

Victor Velchev
Victor Velchev

Reputation: 83

You can hide the axis in your code. Just add an angular on-mouseover event and set the display to true/false with negation !condition:

scales: {
    xAxes: [
        {
            display: false
        }
    ],
    yAxes: [
        {
            display: false
        }
    ]
}

Upvotes: 2

Related Questions