диаграмму вариантов не расслоение плотной изменения диаграммы

Question

У меня есть chart js гистограмму, которая отображает correcly данных, однако у меня есть две проблемы форматирования, которые я не могу показаться, чтобы решить:

Я хочу, чтобы все метки оси X фиксированной быть под углом 90 градусов к оси (не горизонтальной или использующей автоматическое вращение), и я хочу, чтобы цвет полос был зеленым. Я следил за документами, но по какой-то причине я не получил желаемого результата.

var barChartData = { 
     labels: ['label 3', 'label 3', 'label 3'], 
     datasets: [{ 
      fillColor: "rgba(0, 255, 0, 1.0)", 
      data: ["1", "2", "3"] 
     }] 
    }; 

var ctx2 = document.getElementById("allStudentsProg8").getContext("2d"); 
var myBar = new Chart(ctx2, { 
    type: 'bar', 
    data: barChartData, 
    options: { 
     elements: { 
      rectangle: { 
       borderWidth: 2, 
       borderSkipped: 'bottom' 
      } 
     }, 
     responsive: true, 
     legend: { 
      display: false, 
     }, 
     scales: { 
      xAxes: [{ 
       ticks: { 
        minRotation: 90 
       } 
      }] 
     } 
    } 
}); 

Однако это то, что я получаю:

Есть указатели, как к тому, что я делаю неправильно очень ценится.

Answer 1

ChartJS v2.0

Изменить следующий:

Цвет

  datasets: [{ 
      fillColor: "rgba(0, 255, 0, 1.0)", 
      data: ["1", "2", "3"] 
     }] 

в

  datasets: [{ 
      backgroundColor: "rgba(0, 255, 0, 1.0)", 
      borderColor: "#000", 
      data: ["1", "2", "3"] 
     }] 

R otation из ярлыках, лейблах

  xAxes: [{ 
       ticks: { 
        minRotation: 90 
       } 
      }] 

в

  xAxes: [{ 
       ticks: { 
        maxRotation: 0, //Do not change ticks width. Or increase    if you need to change also ticks. 
       }, 
       afterCalculateTickRotation : function (self) { 
        self.labelRotation = 90; //Or any other rotation of x-labels you need. 
       } 
      }]