chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
64.24k stars 11.89k forks source link

bar chart over and over #5161

Closed toneyavuz closed 6 years ago

toneyavuz commented 6 years ago

Hi guys,

How can I do second image?

done image

to do image 'back: true' { "labels": [ "Bayi H/G ORanı %123.6", "Ay Sonu Tah. Ger. %201.7", "Bölge H/G Oranı %93.4", "Türkiye H/G Oranı %97.5" ], "datasets": [ { "label": "Bayi H/G ORanı %123.6", "backgroundColor": [ "#ffdf00" ], "borderWidth": 0, "data": [ 123.6 ], "tooltipValues": [ { "key": "Bayi H/G ORanı", "value": "%123.6" }, { "key": "Ort. Büyüme Oranı", "value": "%155.2" } ] }, { "label": "Ay Sonu Tah. Ger. %201.7", "backgroundColor": [ "#5fea85" ], "borderWidth": 0, "data": [ 201.7 ], "tooltipValues": [ { "key": "Bayi H/G ORanı", "value": "%123.6" }, { "key": "Ort. Büyüme Oranı", "value": "%155.2" } ], "back": true }, { "label": "Bölge H/G Oranı %93.4", "backgroundColor": [ "#0059d7" ], "borderWidth": 0, "data": [ 93.4 ], "tooltipValues": [ { "key": "Bölge H/G Oranı", "value": "%93.4" }, { "key": "Ort. Büyüme Oranı", "value": "%164.1" } ] }, { "label": "Türkiye H/G Oranı %97.5", "backgroundColor": [ "#933ae4" ], "borderWidth": 0, "data": [ 97.5 ], "tooltipValues": [ { "key": "Türkiye H/G Oranı", "value": "%97.5" }, { "key": "Ort. Büyüme Oranı", "value": "%159.4" } ] } ], "reportResponseType": "POINT", "reportType": "Activation", "hasDetailPage": true }

thanks,

etimberg commented 6 years ago

That might be possible using a time scale, but in general that's not possible

toneyavuz commented 6 years ago

Could you show an example?

toneyavuz commented 6 years ago

I could not do. @etimberg

image

options { maintainAspectRatio: false, scales: { xAxes: [{ display: false, categoryPercentage: 1.0, barPercentage: 0.7, }], yAxes: [{ gridLines: { color: '#f5f6fa', offsetGridLines: true, }, ticks: { fontColor: '#bcbcbc', fontSize: 11, fontFamily: 'Turkcell Satura', suggestedMin: 1, }, }], }, legend: { display: false, }, tooltips: { cornerRadius: 0, xPadding: 8, yPadding: 8, caretSize: 0, xAlign: 'center', titleFontColor: '#ffdf00', custom: function (tooltip) { if (!tooltip) return; tooltip.displayColors = false; }, callbacks: { label: (tooltipItem, items) => { let index = tooltipItem.datasetIndex; let item = items.datasets[index]; // item.tooltipValues.shift(); return this.getTooltipText(item.tooltipValues); }, title: (tooltipItem, items) => { let index = tooltipItem[0].datasetIndex; let item = items.datasets[index]; let label = item.tooltipValues[0]; return label.key + ': ' + label.value; }, } }, title: { display: false }, }

datasets [{"label":"Türkiye H/G Oranı %100,5","backgroundColor":["#ffdf00","#5fea85"],"borderWidth":0,"data":[{"x":1517410893742,"y":100,"label":"Türkiye H/G Oranı %100,5"},{"x":1517410893742,"y":232.5,"label":"Ay Sonu Tah. Ger. %232,5"}],"tooltipValues":[{"key":"Türkiye H/G 000000000","value":"%awdawdw"},{"key":"Ort. Büyüme awdawdawdaw","value":"%32234233"}]},{"label":"Türkiye H/G Oranı %97,5","backgroundColor":["#0059d7","#5fea85"],"borderWidth":0,"data":[{"x":1517410894742,"y":70,"label":"Türkiye H/G Oranı %97,5"}],"tooltipValues":[{"key":"Türkiye H/G Oranı","value":"%97,5"},{"key":"Ort. Büyüme Oranı","value":"%233"}]},{"label":"Türkiye H/G Oranı %121","backgroundColor":["#933ae4","#5fea85"],"borderWidth":0,"data":[{"x":1517410895742,"y":121,"label":"Türkiye H/G Oranı %121"}],"tooltipValues":[{"key":"Türkiye H/G Oranı","value":"%121"},{"key":"Ort. Büyüme Oranı","value":"%121"}]},{"label":"Türkiye H/G Oranı %135","backgroundColor":["#ff801f","#5fea85"],"borderWidth":0,"data":[{"x":1517410896742,"y":135,"label":"Türkiye H/G Oranı %135"}],"tooltipValues":[{"key":"Türkiye H/G Oranı","value":"%135"},{"key":"Ort. Büyüme Oranı","value":"%135"}]}]

benmccann commented 6 years ago

Please ask questions on StackOverflow: https://stackoverflow.com/questions/tagged/chart.js