Chart.js: Problems with the "height" of the "canvas"
Hi guys!
I have problems with the height of the Canvas.
Below is a picture of my problem.
code:
<div class="chart">
<canvas id="wgratingChart" style="border: 1px solid #0F0; height: 70px;"></canvas>
</div>
style:
.chart {
position: relative;
overflow: hidden;
width: 100%;
.chart canvas {
width: 100%!important;
`var ctx = document.getElementById("wgratingChart").getContext("2d");
var wgrChartData =
{
type: 'line',
data:
{
labels: ["", "", "", "", "", ""],
datasets:
[
{
data: [1, 2, 4, 2, 3, 5],
label: "Рейтинг WG",
fill: true,
lineTension: 0,
backgroundColor: '#2A2D35',
borderWidth: 3,
borderColor: "rgba(255, 255, 255, 1)",
pointRadius: 2,
pointBorderWidth: 1,
pointBorderColor: "rgba(75,192,192,1)",
pointHoverRadius: 3,
pointHoverBorderWidth: 1,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHitRadius: 3,
}
]
},
options:
{
responsive: true,
maintainAspectRatio: false,
legend:
{
display: false
},
scales:
{
xAxes:
[
{
display: false
}
],
yAxes:
[
{
display: true,
ticks:
{
}
}
]
}
}
};
var wgrChart = new Chart(ctx, wgrChartData);`
zdebskiy
All 15 comments
@zdebskiy try setting height: 70px on the containing div
etimberg
on 4 Jul 2016
Did it! You're my hero!
Can you tell me how to do yAxes different colors and values I need?
zdebskiy
on 4 Jul 2016
@zdebskiy you can change many different colors for the axes
options: {
scales: {
yAxes: [{
gridLines: {
color: 'red', // makes grid lines for this axis red
},
scaleLabel: {
fontColor: 'green', // makes the title of the axis green
}
ticks: {
fontColor: 'blue', // makes the individual tick mark strings blue
}
}]
}
}
I want lines of different colors.
For example:
2.0 - yellow;
2.5 - red;
4.0 - purple;
the rest of the lines blue.
p.s. Sorry for my English
zdebskiy
on 4 Jul 2016
@zdebskiy you have 2 options. You can either use the annotation plugin to draw lines like this. Alternatively, the gridLines.color property can be specified as an array of colors.
etimberg
on 4 Jul 2016
Array of colors not work (((
yAxes:
[
{
gridLines:
{
color: ['yellow', 'blue', 'green', 'yellow', 'blue', 'green'] // makes grid lines for this axis red
},
scaleLabel:
{
fontColor: 'green' // makes the title of the axis green
},
ticks:
{
fontColor: 'blue' // makes the individual tick mark strings blue
}
}
]
With the plugin having problems. The graph is drawn, and the action of the plugin is not displayed.
<!-- ChartJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<script src="plugins/chartjs/Chart.Annotation.min.js"></script>
var ctx = document.getElementById("wgratingChart").getContext("2d");
var wgrChartData =
{
type: 'line',
data:
{
labels: ["", "", "", "", "", ""],
datasets:
[
{
data: [1, 2, 4, 2, 3, 5],
label: "Рейтинг WG",
fill: true,
lineTension: 0,
backgroundColor: '#2A2D35',
borderWidth: 3,
borderColor: "rgba(255, 255, 255, 1)",
pointRadius: 2,
pointBorderWidth: 1,
pointBorderColor: "rgba(75,192,192,1)",
pointHoverRadius: 3,
pointHoverBorderWidth: 1,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHitRadius: 3,
}
]
},
options:
{
responsive: true,
maintainAspectRatio: false,
legend:
{
display: false
},
scales:
{
xAxes:
[
{
display: false
}
],
yAxes:
[
{
gridLines:
{
color: 'yellow' // makes grid lines for this axis red
},
scaleLabel:
{
fontColor: 'green' // makes the title of the axis green
},
ticks:
{
fontColor: 'blue' // makes the individual tick mark strings blue
}
}
]
},
annotation:
{
annotations:
[
{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: '3.2',
borderColor: 'red',
borderWidth: 2
}
]
}
}
};
var wgrChart = new Chart(ctx, wgrChartData);
I think the plugin will work if thr id is changed to 'y-axis-0'
etimberg
on 5 Jul 2016
Changed - did not help. Right I have installed above JS file?
<script src="plugins/chartjs/Chart.Annotation.min.js"></script>
zdebskiy
on 5 Jul 2016
I downloaded the examples. But I also do not see the line "annotations". Only the chart is drawn. I'm doing something wrong...
zdebskiy
on 5 Jul 2016
Can you post a fiddle?
etimberg
on 5 Jul 2016
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.1.4 +++-->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 +++ -->
<script src="bootstrap/js/bootstrap.js"></script>
<!-- ChartJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<script src="plugins/chartjs/Chart.Annotation.min.js"></script>
<!-- AdminLTE App +++ -->
<script src="motor/js/motor.js"></script>
<script>
$(document).ready
(
function ()
{
'use strict';
//-----------------------
//- WG-Rating CHART -
//-----------------------
var ctx = document.getElementById("wgratingChart").getContext("2d");
var wgrChartData =
{
type: 'line',
data:
{
labels: ["", "", "", "", "", "", "", ""],
datasets:
[
{
data: [200, 300, 100, 200, 400, 200, 300, 500],
label: "Рейтинг WG",
fill: true,
lineTension: 0,
backgroundColor: '#2A2D35',
borderWidth: 3,
borderColor: '#f6a821',
pointRadius: 2,
pointBorderWidth: 1,
pointBorderColor: "#f6a821",
pointHoverRadius: 3,
pointHoverBorderWidth: 2,
pointHoverBackgroundColor: "#2A2D35",
pointHoverBorderColor: "#F5A212",
pointHitRadius: 3
}
]
},
options:
{
responsive: true,
maintainAspectRatio: false,
legend:
{
display: false
},
scales:
{
xAxes:
[
{
display: false
}
],
yAxes:
[
{
display: false
}
]
}
}
};
var wgrChart = new Chart(ctx, wgrChartData);
//-----------------------
//- WinRate CHART -
//-----------------------
var ctx = document.getElementById("winrateChart").getContext("2d");
var winrateChartData =
{
type: 'line',
data:
{
labels: ["Янв", "Фев", "Март", "Апр", "Май", "Июнь", "Июль", "Авг"],
datasets:
[
{
data: [52, 51, 50, 48, 45, 60, 65, 55],
label: "Победы",
fill: true,
lineTension: 0,
backgroundColor: 'rgba(0, 255, 0, 0.3)',
borderWidth: 3,
borderColor: '#0F0',
pointRadius: 2,
pointBorderWidth: 1,
pointBorderColor: "#0F0",
pointHoverRadius: 3,
pointHoverBorderWidth: 2,
pointHoverBackgroundColor: "#2A2D35",
pointHoverBorderColor: "#0F0",
pointHitRadius: 3
},
{
data: [48, 49, 50, 52, 55, 40, 35, 45],
label: "Поражения",
fill: true,
lineTension: 0,
backgroundColor: 'rgba(255, 0, 0, 0.3)',
borderWidth: 3,
borderColor: '#F00',
pointRadius: 2,
pointBorderWidth: 1,
pointBorderColor: "#F00",
pointHoverRadius: 3,
pointHoverBorderWidth: 2,
pointHoverBackgroundColor: "#2A2D35",
pointHoverBorderColor: "#F00",
pointHitRadius: 3
}
]
},
options:
{
responsive: true,
maintainAspectRatio: false,
legend:
{
display: false
},
scales:
{
xAxes:
[
{
display: true,
gridLines:
{
color: "#848C94"
},
ticks:
{
fontColor: '#848C94'
}
}
],
yAxes:
[
{
display: true,
gridLines:
{
color: "#848C94"
},
ticks:
{
fontColor: '#848C94',
callback: function(value) { return value+'%'; },
padding: 15
}
}
]
},
annotation:
{
annotations:
[
{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '65',
borderColor: 'red',
borderWidth: 2
}
]
}
}
};
var winrateChart = new Chart(ctx, winrateChartData);
}
);
zdebskiy
on 5 Jul 2016
@zdebskiy I copied your code into a fiddle and it seemed to work:
https://jsfiddle.net/royddLw8/
etimberg
on 5 Jul 2016
I downloaded and connected the bad file "Chart.Annotation.js".
I connected "https://cdn.rawgit.com/chartjs/Chart.Annotation.js/master/Chart.Annotation.js" from you fiddle and it worked!!!
Big thank you!!!
zdebskiy
on 5 Jul 2016
Glad I could help :smile:
etimberg
on 5 Jul 2016
Related issues
HeinPauwelyn
·
3Comments
Woogles
·
3Comments
adriantombu
·
3Comments
bytesnz
·
3Comments
JAIOMP
·
3Comments
Most helpful comment
@zdebskiy I copied your code into a fiddle and it seemed to work:
https://jsfiddle.net/royddLw8/