How draw vertical line while hovering tooltip (with vue-chartjs)? - javascript

I'm using vue-chartjs in my nuxt.js project. I have line chart and I want to draw vertical line while hovering like this example. Below chart options.
The problem is that I could not integrate code from the example with vue. Thanks in advance))
WeatherChart.vue
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
props: {},
data() {
return {
options: {
responsive: true,
maintainAspectRatio: false,
legend: false,
tooltips: {
enabled: false,
mode: 'x',
intersect: false,
xPadding: 14,
yPadding: 14,
position: 'nearest',
custom: (tooltipModel) => {
// Tooltip Element
let tooltipEl = document.getElementById('chartjs-tooltip')
//There some options
},
},
},
}
},
mounted() {
this.renderChart(
{
labels: this.labels,
datasets: [
{
label: 'Kunduzi',
borderColor: 'rgba(0, 195, 137, 1)',
pointBackgroundColor: 'rgba(0, 195, 137, 1)',
borderWidth: 3,
pointBorderColor: 'rgba(0, 195, 137, 1)',
backgroundColor: 'rgba(226, 255, 246, 0.5)',
data: this.dataDay,
fill: '+1',
},
{
label: 'Kechasi',
borderColor: 'rgba(19, 133, 250, 1)',
pointBackgroundColor: 'rgba(19, 133, 250, 1)',
pointBorderColor: 'rgba(19, 133, 250, 1)',
borderWidth: 3,
backgroundColor: 'rgba(212, 234, 255, 0.5)',
data: this.dataNight,
},
],
},
this.options
)
},
}
</script>

Related

remove data display in middle of the bar's and every graph from graphs in chart js

I'm using Chart.js v2.9.3 in sails js
my question is how should I remove the values display in the middle of the bars
config for chat is below
var ChartConfig = {
type: "line",
data: {
labels: [],
datasets: [{
label: "Earnings",
lineTension: 0.3,
backgroundColor: "rgba(0, 97, 242, 0.05)",
borderColor: "rgba(0, 97, 242, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(0, 97, 242, 1)",
pointBorderColor: "rgba(0, 97, 242, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(0, 97, 242, 1)",
pointHoverBorderColor: "rgba(0, 97, 242, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: []
}]
},
options: {
maintainAspectRatio: false,
barValueSpacing: 20,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
barThickness: barThickness,
gridLines: {
display: false,
drawBorder: false
},
ticks: {
padding: 10,
// maxTicksLimit: 10
},
stacked: true,
}],
yAxes: [{
ticks: {
maxTicksLimit: 10,
padding: 10,
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [2],
zeroLineBorderDash: [2]
},
stacked: true,
}]
},
legend: {
display: true,
labels: {
filter: function (item, chart) {
// Logic to remove a particular legend item goes here
return !item.text.includes('Emp_Id') && !item.text.includes('Rel_Id')
}
}
},
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
titleMarginBottom: 10,
titleFontColor: "#6e707e",
titleFontSize: 14,
borderColor: "#dddfeb",
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
intersect: false,
mode: "index",
caretPadding: 10,
},
plugins: {
colorschemes: {
scheme: ThemeVariable
},
},
}
}
also dous not add anything other then this in any place.
the value with a simple bar graph is ok but with stacked bars and pie and doughnut its looks dirty.
I've attached the screenshot of the graph.graph's spanshot
can anyone help me with this
thank you

I'm trying to add a click event, using javascript, to each column of a barchart in Chart.js

I've been trying to add a click event to each column in a bar chart using Chart.js. What I'm trying to figure out is how to make a click event on each column execute the code I want.
The goal for this is when a user clicks on a particular bar of the chart, it executes a php form submit that takes them to another page on the website.
The bar chart data is populated from an SQL database via php when the user goes to the page.
Here's an example of the code I have so far ...
<canvas id="briskChart" style="margin:auto;display:block;background-color:white;border-style:solid;border-width:1px;padding:10px;"></canvas>
<script>
var red = <?=json_encode($count1[0]);?>;
var yellow = <?=json_encode($count2[0]);?>;
var green = <?=json_encode($count3[0]);?>;
var blue = <?=json_encode($count4[0]);?>;
var grey = <?=json_encode($count5[0]);?>;
var dept = <?=json_encode($row['dept']);?>;
var c1 = document.getElementById('briskChart')
var ctx = c1.getContext("2d");
var briskChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Yellow', 'Green', 'Watch', 'Retired'],
datasets: [{
data: [red, yellow, green, blue, grey],
backgroundColor: [
'rgba(255, 0, 0, 0.4)',
'rgba(255, 216, 0, 0.4)',
'rgba(0, 255, 0, 0.4)',
'rgba(0, 0, 255, 0.4)',
'rgba(160, 160, 160, 0.4)'
],
borderColor: [
'rgba(255, 0, 0, 1)',
'rgba(255, 216, 0, 1)',
'rgba(0, 255, 0, 1)',
'rgba(0, 0, 255, 1)',
'rgba(160, 160, 160, 1)'
],
borderWidth: 1
}]
},
options: {
onClick: event => {
document.bred.submit();
},
title: {
display: true,
fontSize: 24,
text: dept + ' Dept Risk Summary',
fontColor: '#000000'
},
legend: {
display: false,
},
scales: {
xAxes: [{
display: true,
gridLines: {color: '#000000'},
ticks: {
fontColor: "black",
fontSize: 16
}
}],
yAxes: [{
display: true,
gridLines: {color: '#000000'},
ticks: {
beginAtZero: true,
fontColor: "black",
fontSize: 16,
stepSize: 1
}
}],
}
}
});
</script>
Here is the html:
<form action='../php/bred.php' method='POST' name='bred'>
</form>
The documentation for Chart.js is very limited regarding click events. For each data series, when the column is clicked on, I want to run a corresponding document.[form name].submit to take the user to that new page.
If anybody has any experience doing this with Chart.js and could point me in the right direction, I'd be eternally grateful.

You can create a click handler that retrieves the x and y values from the chart. Then, using that data, you could send a GET or POST request to your PHP script.
Example for getting the values from the bar chart (the key here is to look at the onClick function):
var red, yellow, green, blue, grey, dept = "";
var c1 = document.getElementById('briskChart')
var ctx = c1.getContext("2d");
var briskChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Yellow', 'Green', 'Watch', 'Retired'],
datasets: [{
data: [1, 2, 3, 4, 5],
backgroundColor: [
'rgba(255, 0, 0, 0.4)',
'rgba(255, 216, 0, 0.4)',
'rgba(0, 255, 0, 0.4)',
'rgba(0, 0, 255, 0.4)',
'rgba(160, 160, 160, 0.4)'
],
borderColor: [
'rgba(255, 0, 0, 1)',
'rgba(255, 216, 0, 1)',
'rgba(0, 255, 0, 1)',
'rgba(0, 0, 255, 1)',
'rgba(160, 160, 160, 1)'
],
borderWidth: 1
}]
},
options: {
onClick: function(c, i) {
element = i[0]; // the chart element you clicked on
var xValue = this.data.labels[element._index]; // the x-value of the bar
var yValue = this.data.datasets[0].data[element._index]; // the y-value of the bar
console.log(xValue);
console.log(yValue);
// then, here, you could send a GET/POST request to your PHP function
},
title: {
display: true,
fontSize: 24,
text: dept + ' Dept Risk Summary',
fontColor: '#000000'
},
legend: {
display: false,
},
scales: {
xAxes: [{
display: true,
gridLines: {
color: '#000000'
},
ticks: {
fontColor: "black",
fontSize: 16
}
}],
yAxes: [{
display: true,
gridLines: {
color: '#000000'
},
ticks: {
beginAtZero: true,
fontColor: "black",
fontSize: 16,
stepSize: 1
}
}],
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="briskChart">
</canvas>

How to hide tooltip for selected datasets? - Chart.js v2.8

I have this graph with four datasets. Two that shows count of values and two lines that represent a goal or target for each value. What I want is to group all tooltips while hovering but exclude the two tooltips for the goal lines. How does one do that?
The following code shows some mockup numbers for the data, and the tooltip shows me all the labels.
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: 'Count type 1',
data: [48, 33, 32, 35, 42, 38],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 204, 0, 1)',
fillColor: 'rgba(255, 204, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 204, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Goal 1',
data: [48.000, 47.040, 46.080, 45.120, 44.160, 43.200],
backgroundColor: 'transparent',
borderColor: 'rgba(0, 255, 0, 1)',
fillColor: 'transparent',
pointBorderColor: 'transparent',
pointRadius: 0,
borderWidth: 0.4,
lineTension: 0
},
{
label: 'Count type 2',
data: [24, 37, 30, 22, 29, 18],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 0, 0, 1)',
fillColor: 'rgba(255, 0, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 0, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Goal 2',
data: [24.000, 23.520, 23.040, 22.560, 22.080, 21.600],
backgroundColor: 'transparent',
borderColor: 'rgba(0, 255, 0, 1)',
pointBorderColor: 'transparent',
pointRadius: 0,
borderWidth: 0.4,
lineTension: 0
}
]
},
options: {
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>
I have tried various methods, some that works half way (excludes only one dataset) or with too much extra code and 'blinking' or flickering tooltips while disappearing.

While working on the question I stumbled up on this solution using filter. It is based on a answer to simular question.
filter: function (tooltipItems, data) {
var label = data.datasets[tooltipItems.datasetIndex].label;
if ((label == "Goal 1")||(label == "Goal 2")) {
return false;
} else {
return true;
}
}
Here is the code from my original question including this filter.
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: 'Count type 1',
data: [48, 33, 32, 35, 42, 38],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 204, 0, 1)',
fillColor: 'rgba(255, 204, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 204, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Goal 1',
data: [48.000, 47.040, 46.080, 45.120, 44.160, 43.200],
backgroundColor: 'transparent',
borderColor: 'rgba(0, 255, 0, 1)',
fillColor: 'transparent',
pointBorderColor: 'transparent',
pointRadius: 0,
borderWidth: 0.4,
lineTension: 0
},
{
label: 'Count type 2',
data: [24, 37, 30, 22, 29, 18],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 0, 0, 1)',
fillColor: 'rgba(255, 0, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 0, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Goal 2',
data: [24.000, 23.520, 23.040, 22.560, 22.080, 21.600],
backgroundColor: 'transparent',
borderColor: 'rgba(0, 255, 0, 1)',
pointBorderColor: 'transparent',
pointRadius: 0,
borderWidth: 0.4,
lineTension: 0
}
]
},
options: {
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
filter: function(tooltipItems, data) {
var label = data.datasets[tooltipItems.datasetIndex].label;
if ((label == "Goal 1") || (label == "Goal 2")) {
return false;
} else {
return true;
}
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Final version (I hope). Shortly after my answer I stumbled upon this plugin which is exactly what I really was looking for.
https://github.com/chartjs/chartjs-plugin-annotation
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: 'Count type 1',
data: [48, 33, 32, 35, 42, 38],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 204, 0, 1)',
fillColor: 'rgba(255, 204, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 204, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Count type 2',
data: [24, 37, 30, 22, 29, 18],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 0, 0, 1)',
fillColor: 'rgba(255, 0, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 0, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
}
]
},
options: {
responsive: true,
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
drawTime: 'afterDatasetsDraw',
id: 'a-line-1',
scaleID: 'y-axis-0',
value: 48,
endValue: 43,
borderColor: 'rgb(75, 192, 192)',
borderWidth: 2,
label: {
backgroundColor: 'rgba(255,204,0, 0.4)',
fontColor: 'rgba(0, 0, 0, 0.6 )',
fontSize: 12,
enabled: true,
content: 'Goal from 48 to 43',
yAdjust: -18,
xAdjust: 0,
}
},
{
type: 'line',
mode: 'horizontal',
drawTime: 'afterDatasetsDraw',
id: 'a-line-2',
scaleID: 'y-axis-0',
value: 24,
endValue: 21,
borderColor: 'rgb(75, 192, 192)',
borderWidth: 2,
label: {
backgroundColor: 'rgba(255,0,0,0.4)',
fontColor: 'rgba(255, 255, 255 )',
fontSize: 12,
enabled: true,
content: 'Goal from 24 to 21',
yAdjust: 14,
xAdjust: 0,
}
}]
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'interface'
},
ticks: {
beginAtZero: true
}
}]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js"></script>
<canvas id="myChart"></canvas>

Can't increase font size in google bar chart

I have the following mock up of a bar chart. Pretty simple except I can't seem to get the font size on the X axis to increase. I am guessing I am doing something wrong with the hAxis or just using the wrong option.
<script src="Chart.Bundle.min.js" type="text/javascript"></script>
...
<canvas id="myChart" height="220" ></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Break','Lunch','Meeting','Aux Out','Aux In'],
datasets: [{
data: [20, 20, 20, 20, 20],
backgroundColor: [
'rgba(66, 244, 98, 0.9)',
'rgba(101, 3, 96, 0.9)',
'rgba(198, 192, 194, 0.9)',
'rgba(43, 136, 234, 0.9)',
'rgba(232, 11, 55, 0.9)'
],
borderColor: [
'rgba(57,214,86,1)',
'rgba(81, 2, 77, 1)',
'rgba(145, 140, 141, 1)',
'rgba(37, 118, 203, 1)',
'rgba(173, 8, 41, 1)'
],
borderWidth: 2
}]
},
options: {
responsive: true,
legend : {
display: false,
},
hAxis: {
textStyle: {
fontSize: 32
}
}
}
});
</script>
</div>

first, you're using chart.js not google charts
for chart.js, the x-axis label font size options are as follows...
scales: {
xAxes: [{
ticks: {
fontSize: 40
}
}]
}
see following working snippet...
$(document).ready(function() {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Break','Lunch','Meeting','Aux Out','Aux In'],
datasets: [{
data: [20, 20, 20, 20, 20],
backgroundColor: [
'rgba(66, 244, 98, 0.9)',
'rgba(101, 3, 96, 0.9)',
'rgba(198, 192, 194, 0.9)',
'rgba(43, 136, 234, 0.9)',
'rgba(232, 11, 55, 0.9)'
],
borderColor: [
'rgba(57,214,86,1)',
'rgba(81, 2, 77, 1)',
'rgba(145, 140, 141, 1)',
'rgba(37, 118, 203, 1)',
'rgba(173, 8, 41, 1)'
],
borderWidth: 2
}]
},
options: {
responsive: true,
legend : {
display: false,
},
scales: {
xAxes: [{
ticks: {
fontSize: 18
}
}]
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myChart"></canvas>

chart.js My DATA doesn't go along with the label,

I'm using chart.js on a project, a canvas on the html.
However, the data i'm inputting there doesn't go along with the label.
The data bars are not following the axes properly. Is there a way to add a padding, to the bar? Or something similar?
I've tried many ways, but can't get it right.
Here is my config:
$(window).on("load", function(){
//Get the context of the Chart canvas element we want to select
var ctx = $("#bar-multi-axis");
// Chart Options
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration:500,
hoverMode: 'label',
stacked: false,
title:{
display:false,
text:"Chart.js Bar Chart - Multi Axis"
},
scales: {
xAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "bottom",
id: "x-axis-1",
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: true,
}
}, {
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: false,
position: "bottom",
id: "x-axis-2",
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: false,
}
}]
}
};
// Chart Data
var chartData = {
labels: ["Ações", "Opções", "Termo", "BM&F", "Garantias","Tesouro Direto","Financeiro","BTC","Renda Fixa","Clubes e fundos"],
datasets: [{
label: "Ações",
data: [45],
backgroundColor: "#5175E0",
hoverBackgroundColor: "rgba(81,117,224,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
}, {
label: "Opções",
data: [28],
backgroundColor: "#16D39A",
hoverBackgroundColor: "rgba(22,211,154,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Termo",
data: [-40],
backgroundColor: "#F98E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "BM&F",
data: [25],
backgroundColor: "#F00E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Garantias",
data: [-16],
backgroundColor: "#E12E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Tesouro Direto",
data: [10],
backgroundColor: "#E98A76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Financeiro",
data: [-12],
backgroundColor: "#F98A76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "BTC",
data: [50],
backgroundColor: "#F18E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Renda Fixa",
data: [24],
backgroundColor: "#D98E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Clubes e fundos",
data: [-24],
backgroundColor: "#A98E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
}]
};
var config = {
type: 'horizontalBar',
// Chart Options
options : chartOptions,
data : chartData
};
// Create the chart
var lineChart = new Chart(ctx, config);
});

I suggest to use only one dataset and define specific color for each bar using an array asbackgroundColor property:
datasets: [{
label: "my set",
data: [45, 28, -40, 25, -16, 10, -12, 50, 24, -24],
backgroundColor: ["rgba(255, 99, 132, 0.6)", "rgba(255, 159, 64, 0.6)", "rgba(255, 205, 86, 0.6)", "rgba(75, 192, 192, 0.6)", "rgba(54, 162, 235, 0.6)", "rgba(153, 102, 255, 0.6)", "rgba(201, 203, 207, 0.6)", "rgba(155, 99, 132, 0.6)","rgba(255, 99, 32, 0.6)"],
borderColor: "transparent",
xAxisID: "x-axis-1",
}]
Check my fiddle: https://jsfiddle.net/beaver71/2hp160zh/
// Chart Options
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration:500,
hoverMode: 'label',
stacked: false,
legend: {display:false,},
title:{
display:false,
text:"Chart.js Bar Chart - Multi Axis"
},
scales: {
xAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "bottom",
id: "x-axis-1",
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: true,
}
}, {
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: false,
position: "bottom",
id: "x-axis-2",
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
display: true,
type: 'category',
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: false,
}
}]
}
};
// Chart Data
var chartData = {
labels: ["Ações", "Opções", "Termo", "BM&F", "Garantias","Tesouro Direto","Financeiro","BTC","Renda Fixa","Clubes e fundos"],
datasets: [{
label: "my set",
data: [45, 28, -40, 25, -16, 10, -12, 50, 24, -24],
backgroundColor: ["rgba(255, 99, 132, 0.6)", "rgba(255, 159, 64, 0.6)", "rgba(255, 205, 86, 0.6)", "rgba(75, 192, 192, 0.6)", "rgba(54, 162, 235, 0.6)", "rgba(153, 102, 255, 0.6)", "rgba(201, 203, 207, 0.6)", "rgba(155, 99, 132, 0.6)","rgba(255, 99, 32, 0.6)"],
borderColor: "transparent",
xAxisID: "x-axis-1",
}]
};
var config = {
type: 'horizontalBar',
options : chartOptions,
data : chartData
};
var lineChart = new Chart('myChart', config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="600"></canvas>

Categories