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
- Set Start Value as '0' With Dynamic Data In Chart.js
- how to plot multiple time series in chartjs where each time series has different times
- How can we build charts on Polymer 1.0 using Chart.js?
- Vue 2: How to unit test component that uses Chart.js (vue-chart-3)
- Chart.js: stack the bars to the left
- Add labels to bar chart: chartjs
- Chart.js polar chart
- References in axis using chart.js (or another library)
- Code for Chartjs Typescript definition file
- How can I create a time series line graph in chart.js?
- Chart Js , loading data on selection but bar graph displaying old values as well on hovering
- Hiden Gridline in chart JS
- How to set a borderWidth on ChartJS - AngularJS?
- how to change size of point in ChartJS
- using gradient colors in angular-chart.js
- ChartJS tooltip scrollbar to prevent data overflow?
- Chart.js tooltipTemplate not working
- Chartjs axis description is not selectable and therefor not copyable
- Prevent label of another data from being toggled whenever a label from one data is toggled
- Laravel & ChartJS
- Using Object.assign to merge objects
- angular-chart.js doughnut chart : how to show data in the center of a chart
- Multiple axis line chart with Chart.js and JSON data from Google Sheet
- chartjs Line chart Javascript
- Run the function on load
- Charts.js & Bootstrap Accordion
- How to detect when Tooltip closes in chart.js?
- Polar Area in Chart JS Rotates When Adding Labels
- charts.js tooltips on different data ranges
- Chart.JS Format Labels For DataSets Differently