CODEWITHSUNDEEP
javascriptchart.js2
Edwin
Edwin

Reputation: 63

How to hide grid lines but show legend on chart.js

Hi I have the current code to display a pie chart currently using chart.js version 2.5. https://jsfiddle.net/nLtacgoc/

1) How can I hide the grid lines while still showing the legend?

2) Currently, from the code, the legend at the top of the chart and data labels are only responding to this code below and not the label under datasets: Is there a problem here as well?

data: {
    labels: ["Pass", "Retrain", "Fail"],

Upvotes: 2

Views: 1241

Answers (1)

jordanwillis
jordanwillis

Reputation: 10705

  1. To remove the gridlines on your example just delete all your scales config. Just remove the below code. See this forked version.

    scales: {
  xAxes: [{                                 
    ticks: {                                        
      beginAtZero:true
    }                                   
  }],                       
  yAxes: [{
    ticks: {                                        
      beginAtZero:true
    }
  }]
}

    The reason this should be removed is because a pie chart does not have an x or y axis. By adding this config you end up forcing chart.js to render the grid along with the pie chart.

  2. Pie and doughnut charts act a bit different from bar and line charts in that the dataset label is ignored. Only the data labels array is used to generate the legend and tooltips. Here is an example data config to explain what i mean.

    var data = {
    labels: [
        "Red",
        "Blue",
        "Yellow"
    ],
    datasets: [
        {
            data: [300, 50, 100],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }]
};

Upvotes: 2

Related Questions