score:171
Guh I solved it, sorry about the question. But I guess I'll leave an answer in case anyone else runs into my problem.
var ctx = document.getElementById("barChart");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["label 1", "label 2"],
datasets: [{
label: "My Label",
backgroundColor: "rgba(159,170,174,0.8)",
borderWidth: 1,
hoverBackgroundColor: "rgba(232,105,90,0.8)",
hoverBorderColor: "orange",
scaleStepWidth: 1,
data: [4, 5]
}]
},
options: {
legend: {
labels: {
fontColor: "blue",
fontSize: 18
}
},
scales: {
yAxes: [{
ticks: {
fontColor: "green",
fontSize: 18,
stepSize: 1,
beginAtZero: true
}
}],
xAxes: [{
ticks: {
fontColor: "purple",
fontSize: 14,
stepSize: 1,
beginAtZero: true
}
}]
}
}
});
<!-- Edit:
chart.js recently released new version v3.x
which is not backwards compatible with v2.x
-->
<!--<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->
<!-- above link gets you latest version of chart.js (at v3.3.2 now)
hence snippet didn't work propperly anymore :-(
-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script>
<!-- above link gets you v2.9.4
and snippet works agian :-)
-->
<div>
<canvas id="barChart" height="140"></canvas>
</div>
score:1
Inside the dataset, assign a color to the attribute borderColor
.
data: {
labels: [1, 2, 3, 4, 5],
datasets: [
{
data: temp,
label: "Temperature",
backgroundColor: "rgba(219, 0, 0, 1)",
borderColor: "rgba(219, 0, 0, 1)",
fill: false
},
{
data:rh,
label: "Humidity",
fill: false
},
{
data:lux,
label: "Luminosity",
fill:false
}
]
}
I've been working with a line graph and backgroundColor sets the color of the specific points on the line graph, and then borderColor sets the color of the line itself as well as the legend label associated with that dataset.
score:30
Good question and good answer from @PhantomSalt
His answer works perfectly well with ....... chart.js
v2.xx
I modified his good code to work with .. chart.js
v3.xx
(v3.xx is not backwards compatible with v2.xx)
// var ctx = document.getElementById("barChart")
const ctx = document.getElementById("barChart").getContext("2d"); // added '.getContext("2d")'
const myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["label 1", "label 2"],
datasets: [{
label: "My Label",
backgroundColor: "rgba(159,170,174,0.8)",
borderWidth: 1,
hoverBackgroundColor: "rgba(232,105,90,0.8)",
hoverBorderColor: "orange",
scaleStepWidth: 1,
data: [4, 5]
}]
},
options: {
plugins: { // 'legend' now within object 'plugins {}'
legend: {
labels: {
color: "blue", // not 'fontColor:' anymore
// fontSize: 18 // not 'fontSize:' anymore
font: {
size: 18 // 'size' now within object 'font {}'
}
}
}
},
scales: {
y: { // not 'yAxes: [{' anymore (not an array anymore)
ticks: {
color: "green", // not 'fontColor:' anymore
// fontSize: 18,
font: {
size: 18, // 'size' now within object 'font {}'
},
stepSize: 1,
beginAtZero: true
}
},
x: { // not 'xAxes: [{' anymore (not an array anymore)
ticks: {
color: "purple", // not 'fontColor:' anymore
//fontSize: 14,
font: {
size: 14 // 'size' now within object 'font {}'
},
stepSize: 1,
beginAtZero: true
}
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- gets you the latest version of Chart.js, now at v3.3.2 -->
<div>
<canvas id="barChart" height="140"></canvas>
</div>
Source: stackoverflow.com
Related Query
- Chart.js bar chart : Grid color and hide label
- chart js - Apply different color for each x-axes label
- angular-chart.js custom color based on chart label values
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- How to change label color of ng2 chart in angular
- Chart.js label color
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chart area background color chartjs
- ChartJS - Draw chart with label by month, data by day
- How set color family to pie chart in chart.js
- Chart Js change text label orientation on Ox axis
- Chart.js line chart set background color
- chart.js scatter chart - displaying label specific to point in tooltip
- chartjs datalabels change font and color of text displaying inside pie chart
- show label in tooltip but not in x axis for chartjs line chart
- Unable to parse color in line chart (angular-chart.js)
- set background color to save canvas chart
- How to change the color of Chart.js points depending on the label
- Different color for each column in angular-chartjs bar chart
- Chart looks only grey, does not show the color - Chartjs,discordjs
- Chart.js donut chart remains grey - no color
- Chart JS show multiple data points for the same label
- angular-chart.js bar chart with 100% opacity color
- Chartjs change the specific label color in x axis in callback function
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Remove the label and show only value in tooltips of a bar chart
- Adding a label to a doughnut chart in Chart.js shows all values in each chart
- Angular Chart JS prevent x label causing overflow
- how to set chart.js grid color for line chart
- PrimeNg bar chart how to show a label for the y-axis
More Query from same tag
- Chart.js donut chart remains grey - no color
- Send data from a form to another component of the same level -angular
- Add arrow to custom horizontal scrollbar Angular/HTML
- What library should I use to create costume chart in react native?
- Getting dynamic data for chart.js from Django model
- ChartJS Pie Chart How default just show 2 legend datas
- Select data based on value of ID
- How to retrieve ChartJS instance after initialization
- How to add arrays to the barChart with chart.js?
- Chart.js Cannot read property 'apply' of undefined
- How to insert arrays into objects that are inside an array? For ng2-charts / Charts.js
- Create charts with a loop in Django with charts.js
- When updating Chart.js chart the data is updated but canvas is emptied
- Dynamic Chart Data
- Angular Chart Js legends click event not working
- JQuery Datatables overlapped when using column filtering
- Chart.js configuration
- Chartjs Datasets overlapping and z-index
- Charts.js scales yaxes ticks min max doesnt work
- Filter/update already rendered chart.js in react.js
- ChartJS, Disable Tooltip for one plot on a multi graph data
- ChartJS tooltip position / placement
- How do I increase the arrow length on the pie chart in Charts.js?
- Age pyramid: 3.5.1 chartjs
- Chart.js V2 formatting / styling labels
- ChartJS : How to leave just points without lines
- How to align legend in angular-chart.js
- Is there a way to give a pie chart in chart.js a different color outer border than the border color between segments?
- Chart.js: Create custom major ticks on log x-Axis?
- Chart js 2.x renders the canvas invisible