score:0
visual & color test-report
the 3 background-colors for the data-series are shown, but in the legend on top along with the labels.
as far as i can see, they appear as coded in barchartcolors
. see my descriptions and links added to your color-specification comments:
'rgba(92, 184, 92 ,1)', //green: gives other #5cb8ff color description : light blue
'rgba(255, 193, 7 ,1)', //yellow: gives #ffc107 color description : vivid yellow
'rgba(217, 83, 79 ,1)', //red: gives #d9534f color description : soft red
compare against your given screenshot from the generated chart:
however:
- in the legend: they are mixed, not assigned correctly to the labels
- in the chart, on the bars: they are not assigned correctly to the series
{data: [0, 16,4, 3, 10, 0], label: 'both data'}, // expected blue(green) but was random
{data: [0, 5, 0,5, 8, 0], label: 'only data'}, // expected yellow but was random
{data: [41, 6, 6,0, 48, 12], label: 'no data'} // expected red but was random
how to colorize bar datasets
research in the chart.js documentation, bar chart's dataset properties shows, that colors should be supplied for each dataset:
data.datasets[index]
- options for this dataset only
your datasets are 3 series (in js or typescipt defined as 3 elements of an array). they are defined as array barchartdata
with 3 elements or javascript objects. each dataset (object) is defined by properties like data
, label
.. but currently missing a color specification.
so you could define the desired backgroundcolor
for each dataset like this, in each object (not in a separate array!):
solution
typescript:
public barchartdata: any[] = [
{
data: [0, 16,4, 3, 10, 0],
label: 'both data',
backgroundcolor: '#5cb8ff' // lightblue (intended: green)
},
{
data: [0, 5, 0,5, 8, 0],
label: 'only data',
backgroundcolor: '#ffc107' // vividyellow (intended: yellow)
},
{
data: [41, 6, 6,0, 48, 12],
label: 'no data',
backgroundcolor: '#d9534f' // softred (intended: red)
}
];
note:
i used a hexadecimal color notation string (like '#d9534f'
) as specification format. this was offered by the chart.js documentation for colors:
you can specify the color as a string in hexadecimal, rgb, or hsl notations.
the same paragraph also explains why your not-specified (correctly) color for the dataset lead to apparently random colors. they were defined by defaults:
if a color is needed, but not specified, chart.js will use the global default color.
then remove the color
angular-binding from your html:
<canvas basechart class="chart" id ="data"
[datasets]="barchartdata"
[labels]="barchartlabels"
[options]="barchartoptions"
[legend]="barchartlegend"
[charttype]="barcharttype"
></canvas>
demo
i used chart.js version 3.1.1 in plain javascript to test it. it worked and showed the specified colors:
goodie: even managed to add plugins that will change the tool-tip appearance (background-color, label's text-color).
try the live-demo in this fiddle.
further readings
tutorial on ordinarycoders blog (2020): how to use chart.js | 11 chart.js examples
section "chart.js bar chart example" illustrates the configuration of datasets in a bar-chart example.
tutorial on bartosz gajda blog (2020): using angular and chart.js to build real-time charts
it shows how ng2-charts is used to integrate chart.js with angular. the
package.json
used there depends on following versions:"chart.js": "^2.9.3", "ng2-charts": "^2.3.0",
Source: stackoverflow.com
Related Query
- Chart.js in Angular 10: Specified colors not shown in multi-series bar chart (instead random colors)
- Custom dataset object not setting chart.js bar chart colors in Angular 6
- Series Details Not Showing in Angular Chart with Charts.js
- Charts.js - Colors for stacked bar on multi-series line/bar chart are not working
- Charts.js - Bar chart different colors for value intervals not working
- ChartJS not showing data for time series bar chart
- Chart.js colors in bar chart not showing
- ng2 charts bar chart need spacing between 2 bars in series Angular
- The colors of the bar chart in chart.js is not showing. I tried background color and fill color but none of it worked
- Chart.js with line chart and bar chart - bar chart not rendered although the max value of it is shown
- Chart.js: bar chart first bar and last bar not displaying in full
- Chart.js ng2-charts colors in pie chart not showing
- Can't get bar chart colors in Chart js working in React Js
- Angular chart.js onClick is not working - how to get all elements of a bar when it is clicked on
- Chart.js Chart in Angular does not load until resizing browser window
- Time series line chart is not displayed
- How to set single color on each bar in angular chart js
- Time Series Line chart js in react not working
- chart annotations not showing in Angular 2
- Chart.js Date and Time Bar Chart Not Rendering - Line Works Though
- Css style not working well when resizing chart height in angular application
- Bar Chart of ChartJS does not Render
- Vertical Bar Chart not displaying Correctly
- chart js chart bar chart not showing data from 0
- Chartkick-vue bar chart - "horizontalBar" is not a registered controller
- Legend not displaying on Line or Bar chart - React-Chartjs-2
- Using two JSON objects to make Chart.JS Bar Chart Dynamic in Typescript / Angular
- Chartjs with Vue, Bar Chart Border Radius not working
- Bar Chart Not Stacking When Using ChartJs
- Chart JS - Grid colors and gradient fill not showing
More Query from same tag
- Chart.js with React
- Chart.js how to resend animation command to a chart?
- ChartJS showing old values when mouse over on Doughnut after updating values
- Bootstrap Card Render Problem in Google Chrome
- Chart.js bar chart change the label position X-axis
- Chartjs Radar - Change color of end point labels
- Chart.js - Getting data from database using mysql and php
- ChartJs bar not showing up
- Overlay text message on top of a chart
- How to can I get text inside a chats.js circular chart
- ChartJS dataset onclick deselect the rest
- new dataset is not accepted by chartj template
- Transparentize some bars of dataset in ChartJS
- Chart.js only draws when I go through debug on Chrome
- How to install chartjs on laravel 6 via npm
- how to remove odd number from yaxes in chartjs using angular?
- Cannot make my chart to work with data from mongoDB
- chart.js filltext object moved when tooltip is generated because of legend not displaying
- JQuery Line Chart's X Axis not display in ASP.NET, C#, SQL Server
- Chart js: how can I align the legend and the title
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- how to use require(chart.js) in codesandbox
- Resizing a Chart.js chart
- Variable in JavaScript with firebase
- How to edit the ID of each button in a class if a condition is true in JavaScript?
- Inserting Graphs into DomPDF
- Tooltip alignement with Chart.js v2
- How to create dynamic D3 tickFormat in dc charts
- Create a line chart using an user input table from a data table in chart.js
- Create data in data with Chartjs