Menu
So I have this code which is happily displaying a graph in the format I require:
<script>var ChartTitleOps = {
showTooltips: true,
tooltipFillColor: "#e64c65",
tooltipFontFamily: "'Bree Serif', sans-serif",
tooltipFontColor: "#fff",
tooltipTemplate: "<%if (label){%><%=label%> <%}%>(<%= value %> votes)",
barValueSpacing : 2,
scaleLineWidth: 10,
scaleFontFamily: "'Bree Serif', sans-serif",responsive: false,animation: false,maintainAspectRatio: false,scaleIntegersOnly: true,scaleShowGridLines : false,scaleBeginAtZero : true,scaleFontSize: 17,scaleFontColor: "#FFFFFF",scaleOverride:true,scaleSteps:<?php echo $highestVoteCount ?>,scaleStepWidth:1,scaleStartValue:0,scaleGridLineColor : "#1f253d"}; var ChartTitleData = {labels : [<?php styleFinishedVoteAmounts($votesPlaced); ?>],datasets : [{
fillColor : "rgba(52,104,175,0.7)",
strokeColor : "rgba(52,104,175,1)",
data : [<?php styleFinishedVoteCount($VoteCounts); ?>]
}]};var wpChartChartTitleBar = new Chart(document.getElementById("ChartTitle").getContext("2d")).Bar(ChartTitleData,ChartTitleOps);
</script>
I would like to have one of the bars within that graph shows as a different colour from those that are set in the code above.
499
In a chart, click to select the data series for which you want to change the colors. On the Format tab, in the Current Selection group, click Format Selection. tab, expand Fill, and then do one of the following: To vary the colors of data markers in a single-series chart, select the Vary colors by point check box.
If you have (for example) a bar chart of sales against region, drag and drop the region into the Color on the Marks shelf. Once the Colour legend appears, click the little drop down at the top right of the legend box and select Edit Colors to assign the palette you wish, or set individual colours.
Default color palette All you need is to import and register the plugin: import { Colors } from 'chart.js'; Chart.register(Colors); Copied! If you are using the UMD version of Chart.js, this plugin will be enabled by default.
You can change the color of a bar element after you have created your chart.
After new Chart() statement you can access and modify the chart element properties and update the chart like this :
var wpChartChartTitleBar = new Chart(document.getElementById("myChart").getContext("2d")).Bar(ChartTitleData, ChartTitleOps);
// Change 2nd bar to red (display).
wpChartChartTitleBar.datasets[0].bars[1].fillColor = "rgba(229,12,12,0.7)";
wpChartChartTitleBar.datasets[0].bars[1].strokeColor = "rgba(229,12,12,1)";
// Change 2nd bar to red (highlight setting on mouse over)
wpChartChartTitleBar.datasets[0].bars[1].highlightFill = "rgba(0,229,0,0.7)";
wpChartChartTitleBar.datasets[0].bars[1].highlightStroke = "rgba(0,229,0,1)";
wpChartChartTitleBar.update();
See a fiddle of it here.
120
Since rtome's method doesn't seem to work in newer versions of Chart.js, here's a working example of differing bar colours for the current version (2.9.3 as of this post).
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "horizontalBar",
// The data for our dataset
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: [
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
"rgb(75, 192, 192)",
"rgb(54, 162, 235)",
"rgb(153, 102, 255)",
"rgb(201, 203, 207)"
],
borderColor: "rgb(255, 99, 132)",
data: [3, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
body {
margin-top: 35px;
}
#container {
width: 95%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}<html>
<head>
<title>Bar colour example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>
<body>
<div id="container">
<canvas id="myChart"></canvas>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
