score:-1
Accepted answer
i solved it. here used animation: option to set data value at top of bar.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var barchartdata = {
labels: ['6/30', '7/31', '8/31'],
datasets: [{
type: 'line',
label: 'line',
bordercolor: 'red',
borderwidth: 2,
fill: false,
data: [73.6, 72.0, 71.0],
yaxisid: 'y-axis-2'
},
{
type: 'bar',
label: 'dataset 2',
backgroundcolor: 'blue',
data: [1328, 1380, 1380],
bordercolor: 'white',
borderwidth: 2
}, {
type: 'bar',
label: 'dataset 3',
backgroundcolor: 'yellow',
data: [978, 993, 980],
},
]
};
window.onload = function() {
var ctx = document.getelementbyid('canvas').getcontext('2d');
window.mybar = new chart(ctx, {
type: 'bar',
data: barchartdata,
options: {
responsive: true,
title: {
display: true,
text: 'chart.js combo bar line chart'
},
tooltips: {
mode: 'label',
intersect: true,
enabled: false
},
scales: {
xaxes: [{
display: true,
gridlines: {
display: false
},
labels: {
show: true,
}
}],
yaxes: [{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridlines: {
display: false
},
labels: {
show: true,
},
ticks: {
beginatzero: true,
stepsize: 500,
suggestedmax: 3000
},
},
{
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridlines: {
display: false
},
labels: {
show: true,
},
ticks: {
stepsize: 10,
min: 0,
max: 100, // your absolute max value
callback: function(value) {
return (value / 100 * 100).tofixed(0) + '%'; // convert it to percentage
},
},
scalelabel: {
display: true,
labelstring: 'percentage',
},
}
]
},
hover: {
animationduration: 0
},
animation: {
duration: 1,
oncomplete: function() {
var chartinstance = this.chart,
ctx = chartinstance.ctx;
ctx.font = chart.helpers.fontstring(chart.defaults.global.defaultfontsize, chart.defaults.global.defaultfontstyle, chart.defaults.global.defaultfontfamily);
ctx.textalign = 'center';
ctx.textbaseline = 'bottom';
ctx.fillstyle = "#666";
//ctx.fillstyle = dataset.type == "line" ? "blue" : "black";
this.data.datasets.foreach(function(dataset, i) {
ctx.fillstyle = dataset.type == "line" ? "blue" : "black";
var meta = chartinstance.controller.getdatasetmeta(i);
meta.data.foreach(function(bar, index) {
var data = dataset.data[index];
if (dataset.type == "line") {
data = data + '%';
}
ctx.filltext(data, bar._model.x, bar._model.y - 5);
});
});
}
},
},
});
};
</script>
</body>
</html>
score:-1
the chart expects data that needs to be shown, rather than a hide/display logic.
you can manually filter out;
let myset = barchartdata.datasets
barchartdata.datasets = []
for(i = 0;i< myset.length; i++){
if(myset[i].label){
barchartdata.datasets.push(myset[i])
}
}
score:0
there is a plugin with exactly the wanted features for the values over your bars, chartjs-plugin-datalabels (github).
for your percentages on the right yaxis there are many other answers. i recommend this one.
Source: stackoverflow.com
Related Query
- chartjs mixed type display want to set display none for some bar
- How to set a full length background color for each bar in chartjs bar
- Set fixed label size for grouped bar chart in angular Chartjs
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- Different color for each bar in a bar chart; ChartJS
- chartjs : how to set custom scale in bar chart
- Border radius for the bar chart in ChartJS
- Chartjs - data format for bar chart with multi-level x-axes
- Is it possible to set up 0 as a minimum number for bar chart? react-chart.js-2
- ChartJS bar not showing up for simple data points
- ChartJs line chart - display permanent icon above some data points with text on hover
- Gradient color for each bar in a bar graph using ChartJS
- Grouping the object by key for Chartjs bar chart
- ChartJS bar chart fixed width for dynamic data sets
- How to remove bars for those bars with zero value in Chartjs bar chart?
- ChartJS How to set max labels for X axis?
- how to set color for each item in tooltip with ChartJS
- Missing Tooltip for some data points using chartjs
- Show ChartJS Stacked bar on another bar for Target vs Sales analysis
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
- Chartjs - Set start and end value into a Bar Chart
- ChartJS horizontal chart display legend on each bar
- Chartjs stacked bar separate tooltip for all stacked
- How to set static labels for ng2-charts bar charts?
- How to use set the color for each bar in a bar chart using chartjs?
- Chart.JS: How can I only display data labels when the bar width is big enough for the text?
- How to set the chartjs bar graph scale to the highest value in the result data
- Display Bar chart values in the graph - ChartJS
- How to set vertical lines for new day on x-axis in ChartJS v3.x
- Linear x axis for bar chart chartjs
More Query from same tag
- How do I selecting a date range (like onClick but drag/select)
- chartjs-vue charts are empty
- Add new line in es6 inside a doughnut chart
- chartjs - canvas size error
- Trying to display different types of charts using select/option tag
- Chart.js Radar chart multiple datasets
- ChartJS only show me data when I zoom-in or zoom-out
- Module not found: Can't resolve 'chart.js/auto
- Testing Chart.js with Jest/Enzyme - Failed to create chart: can't acquire context from the given item
- chartjs-plugin-streaming + chartjs-plugin-zoom
- How to put labels at 4 points of the day?
- Always display ChartJS custom tooltips
- Vertical spacing in horizontal ChartJS Bar Graph
- Plot dataset from MySQL with Chart.js and PHP
- Javascript and Chart.JS - issue with getting unique text in 3 donut hole charts - same text showing for all 3 donut holes
- Chartjs sample can't be reproduced
- I cannot update my chart ( in react-chartjs-2 )
- How can I remove two labels from my legend with an alternative to item.datasetIndex !== 1 && item.datasetIndex !== 4; ? (Charts.js)
- Cannot visualise chartJS data in ASP .NET Core
- chart.js not getting linked with online database and php
- Chart.js Y Axis Wrong Step Count
- chartjs datalabels change font and color of text displaying inside pie chart
- Chartjs not giving 'xLabel' properly on tooltip
- Changing the opacity of the colour on the Polar Area chart
- chartjs; cannot read property '0' of undefined
- Google charts: Error: Row 0 has 1 columns, but must have 2
- How to select and pass array object to data setting of chart.js config?
- Chart.js - Creating Custom Chart Types
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- How to create float charts with chartjs?