Chart js static chart - how to - javascript

Hi here's a canvas i am using as abackground for a card
just want it static without hover,tooltip or label or any legends just the line chart with its background colour as a static chart.
if anyone can help with options{ apt to disable all of these.you'll be a legedn
thank you
<canvas class = "w-100" id="myChartfill" >
<script>
chartData4 =
{
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
data: [10, 59, 80, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgb(75, 192, 192)',
tension: 0.1,
}]
}
;
const myChartfill = document.getElementById('myChartfill');
if(myChartfill!=null){
new Chart(myChartfill, {
type: 'line',
data: chartData4,
options: {
}
}
)}
</script>
</canvas>


Use the script outside the canvas
chartData4 =
{ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
data: [10, 59, 80, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgb(75, 192, 192)',
tension: 0.1,
}]
};
const myChartfill = document.getElementById('myChartfill');
if(myChartfill!=null){
new Chart(myChartfill, {
type: 'line',
data: chartData4,
options: {
events: [],
plugins: { tooltip: { enabled: false} ,
legend: {
display: false},
},
scales: {
y: {
ticks: {
display: false,
},
grid: {
display: false,
},
},
x: {
ticks: {
display: false,
},
grid: {
display: false,
},
},
},
},
)}
.container {
display: flex;
width: 100%;
height: 50vh;
}
<div class="container">
<canvas class = "w-100" id="myChartfill"></canvas>
</div>


options: {
tooltips: {
enabled: false,
},
legend: {
display: false
},
scales: {
xAxes: [{display: false}],
yAxes: [{display: false}],
}
}

Related

Jquery chartsjs plugin lines not working properly

im trying to using chartsjs to do a line chart.
new Chart(document.getElementById("myChart"), {
type: 'line',
data: {
labels: ['GEN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
datasets: [{
data: [0, 10, 20, 30, 40, 50, 40, 30, 20, 10, 0, 15],
label: "CDL",
borderColor: "#3e95cd",
fill: false
}, {
data: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
label: "CLA",
borderColor: "#8e5ea2",
fill: false
}, {
data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
label: "CLB",
borderColor: "#3cba9f",
fill: false
}, {
data: [40, 20, 10, 16, 24, 38, 5, 7, 45, 0],
label: "CLC",
borderColor: "#e8c3b9",
fill: false
}
]
},
options: {
responsive: false,
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true
}
}]
},
legend: {
labels: {
fontColor: 'black'
}
}
}
});
This is my code and it works, but my lines dont starting in "absolute position" and theyr position is like this:
chart_image
I dont understand why, can someone help me?

Apexchart leaves wrapper when I insert two Y-Axes

If I add two Y-Axes to an Apexchart it is pushed beyond the wrapper and does not resize properly.
I would like to have one Y-Axis displayed on the left side of the chart and the other one on the right side of the chart.
I tried to debug it in my dev tools but I am sure that this is a canvas problem itself.
I provided the snippet below which shows how the left Y-Axis and Jan data are out of scope.
var yearMapOptions = {
chart: {
fontFamily: "'Varela Round', sans-serif",
foreColor: '#2e1a6d',
toolbar: {
show: false
},
height: "100%",
stacked: false
},
colors: ['#2e1a6d', '#47bfb6', '#f37b94', '#ebf394'],
dataLabels: {
enabled: false
},
series: [{
name: 'Net Pips',
type: 'line',
data: [-10, 17, 39, -4, 63, -27, 55, 290, -83, 26, -45, 17],
}, {
name: 'Net Profit',
type: 'line',
data: [-35, 45, 190, -70, -50, 36, -80, 59, -29, 62, -65, 70]
}, {
name: 'Total Volume',
type: 'column',
data: [20, 60, 35, 57, 330, 30, 660, 58, 58, 230, 70, 120]
}, {
name: 'Total Trades',
type: 'column',
data: [6, 23, 11, 8, 33, 4, 57, 13, 13, 45, 17, 28]
}],
stroke: {
width: [3, 3, 3, 3],
curve: 'smooth'
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'August', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yaxis: [{
show: true,
seriesName: 'Net Pips',
opposite: true,
tickAmount: 2,
forceNiceScale: true,
axisTicks: {
show: false,
},
axisBorder: {
show: true,
color: '#00E396'
},
axisTicks: {
show: false,
borderType: 'solid',
color: '#47bfb6',
},
labels: {
style: {
color: '#00E396',
}
},
title: {
text: undefined,
style: {
color: '#00E396',
}
},
}, {
show: true,
seriesName: 'Net Profit',
opposite: false,
tickAmount: 2,
forceNiceScale: true,
axisTicks: {
show: true,
borderType: 'solid',
color: '#2e1a6d',
},
axisBorder: {
show: true,
color: '#FEB019'
},
labels: {
style: {
color: '#FEB019',
},
},
title: {
text: undefined,
style: {
color: '#FEB019',
}
},
}
],
plotOptions: {
bar: {
horizontal: false,
endingShape: 'rounded',
barheight: '100%'
}
},
tooltip: {
fixed: {
enabled: true,
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
offsetY: 30,
offsetX: 60
},
},
grid: {
show: false
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetY: 10
}
};
var yearMapChart = new ApexCharts(
document.querySelector("#yearMap"),
yearMapOptions
);
yearMapChart.render();
.apexcharts-yaxis, .apexcharts-xaxis-label {
font-weight: bold;
}
.yearMapWrapper {
height: 100%;
width: 80%;
margin-left: 10%;
}
<html>
<body>
<div class="rowFiveCol2 layerStyles">
<div class="yearMapWrapper">
<div id="yearMap"></div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<html>

Removing grid: { show: false } makes the y-axis visible.
PS: Changing grid behavior should not affect the y-axis. It seems like a bug in ApexCharts which will be addressed soon.

Is it possible to show labels for all lines?

Basically I have chartJS based line chart, with two lines. X axis has dates, and Y axes has price.
There is two lines (one for average price and one for minimum price).
So I was wondering, if it is at all possible to so that lets say I hover over a point for minimum price, the average price point's label pops up as well, and vice versa.
Or if that is not possible, maybe it is possible to make it so each label contains both values (the min and average price for that particular day).
Here is the code, I have so far:
var ctx = document.getElementById('price-history').getContext('2d');
ctx.height = 150;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: <?= json_encode($priceChangeData['labels']); ?>,
datasets: [
{
label: 'Minimali kaina',
backgroundColor: 'rgb(64, 127, 178)',
borderColor: 'rgb(64, 127, 178)',
borderWidth: 1,
data: <?= json_encode($priceChangeData['line']['price_min']); ?>,
fill: false
},
{
label: 'Vidutinė kaina',
backgroundColor: '#686868',
borderColor: '#686868',
borderWidth: 1,
data: <?= json_encode($priceChangeData['line']['price_avg']); ?>,
fill: false
}
],
},
options: {
responsive: true,
layout: {
padding: {
left: 20,
right: 15
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Data'
}
}],
yAxes: [{
display: true,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Kaina'
}
}]
}
}
});

I am assuming you are talking about the tooltip­'s label. In that case, you can set tooltips mode to index in your chart­'s options config, like so :
options: {
tooltips: {
mode: 'index'
},
...
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var ctx = document.getElementById('price-history').getContext('2d');
ctx.height = 150;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], //<?= json_encode($priceChangeData['labels']); ?>,
datasets: [{
label: 'Minimali kaina',
backgroundColor: 'rgb(64, 127, 178)',
borderColor: 'rgb(64, 127, 178)',
borderWidth: 1,
data: [3, 1, 4, 2, 5], //<?= json_encode($priceChangeData['line']['price_min']); ?>,
fill: false
}, {
label: 'Vidutinė kaina',
backgroundColor: '#686868',
borderColor: '#686868',
borderWidth: 1,
data: [2, 4, 1, 5, 3], //<?= json_encode($priceChangeData['line']['price_avg']); ?>,
fill: false
}],
},
options: {
responsive: true,
tooltips: {
mode: 'index'
},
layout: {
padding: {
left: 20,
right: 15
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Data'
}
}],
yAxes: [{
display: true,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Kaina'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="price-history"></canvas>

realign Labels inside and outside the bar chart on highcharts

I am facing dificulties to make realign labels inside and outside the bar if value is < 0.35 of max. The labels simply dont appears to lower values. My Fiddle: http://jsfiddle.net/Yrygy/527/
My Code:
var GlobalRotation = -90;
var GlobalAlign = 'right';
var X;
var Y;
function realignLabels(serie) {
$.each(serie.points, function (j, point) {
if (!point.dataLabel) return true;
var max = serie.yAxis.max,
labely = point.dataLabel.attr('y')
if (point.y / max < 0.35) {
point.dataLabel.attr({
y: labely - 120,
});
}
});
};
$(function() {
Highcharts.Series.prototype.drawDataLabels = (function(func) {
return function() {
func.apply(this, arguments);
if ((this.options.dataLabels.enabled || this._hasPointLabels) && this.chart.options.chart.realignLabels) {
realignLabels(this);
}
};
}(Highcharts.Series.prototype.drawDataLabels));
$('#container').highcharts({
chart: {
type: 'line',
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
style: {
fontWeight: 'bold'
},
formatter: function() {
var max = this.series.yAxis.max,
color = 'black';
return '<span style="color: ' + color + '">' + this.y + ' </span>';
},
verticalAlign: "top",
}
}
},
series: [{
data: [69.9, 71.5, 76.4, 69.2, 74.0, 176.0, 75.6, 48.5, 316.4, 94.1, 95.6, 2.33]
}]
});
$('#container2').highcharts({
chart: {
type: 'column',
realignLabels: true,
animation: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:,.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
animation: true,
pointPadding: 0.05, // Defaults to 0.1
groupPadding: 0.05, // Defaults to 0.2
dataLabels: {
enabled: true,
rotation: GlobalRotation,
color: '#FFFFFF',
align: GlobalAlign,
verticalAlign: "top",
y: 10,
inside: false,
style: {
fontSize: '12px',
fontFamily: 'Verdana, sans-serif'
},
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
}
},
},
series: [
{
name: 'Serie 2',
data: [120, 125, 130, 140, 120, 120, 130, 125, 130, 125, 120, 130]},
{
name: 'Serie 1',
data: [116, 120, 125, 136, 115, 114, 125, 119, 125, 120, 114, 25]},
{
name: 'Serie 1',
data: [4, 5, 5, 4, 5, 6, 5, 6, 5, 5, 6, 115]}
]
});
});
The data appear inside the column as I desired, but i dont know how to show the lower values.

Your labels are moved out of the view (dataLabel.attr('y') == -9999). This is caused by crop option. Disable that option, and labels will show up:
plotOptions: {
column: {
animation: true,
pointPadding: 0.05, // Defaults to 0.1
groupPadding: 0.05, // Defaults to 0.2
dataLabels: {
enabled: true,
rotation: GlobalRotation,
color: '#FFFFFF',
align: GlobalAlign,
verticalAlign: "top",
y: 10,
inside: false,
crop: false, // disabled crop
style: {
fontSize: '12px',
fontFamily: 'Verdana, sans-serif'
},
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
}
},
}
Demo: http://jsfiddle.net/Yrygy/530/

Can I set different fill color based on a given threshold in Chart.js?

Is it possible to have different fill colors for values above or below a given threshold in Chart.js (Chart.js)?
I can't find any option to do this in Chart.js, has anyone done something like this before? I prefer to use Chart.js over Highcharts.
Like this: Highcharts example
html
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
js
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {
title: {
text: '$'
}
},
title: {
text: 'Win/Loss'
},
series: [{
name: 'Avg. ($)',
data: [546, 342, -234, -540, 103, -345],
threshold: -1,
negativeFillColor: 'rgba(255,0,0,0.5)',
fillColor: 'rgba(0,204,0,0.5)',
lineColor: 'rgba(0,0,0,1)',
marker: {
fillColor: 'rgba(255,255,255,1)',
lineColor: 'rgba(0,0,0,1)',
lineWidth: 1
}
},{
name: 'User ($)',
data: [-640, -665, -700, -640, -630, -623],
fillOpacity: 0,
lineColor: 'rgba(20, 94, 204, 1)',
marker: {
fillColor: 'rgba(255,255,255,1)',
lineColor: 'rgba(20, 94, 204, 1)',
lineWidth: 1
}
}]
});
});

I did a similar thing using gradientStroke command, then applying this to the backgroundColor:
var ctx = document.getElementById("YearsExperience").getContext("2d");
var gradientStroke = ctx.createLinearGradient(0, 1200, 0, 0);
gradientStroke.addColorStop(0, "#80b6f4");
gradientStroke.addColorStop(0.2, "#94d973");
gradientStroke.addColorStop(0.4, "#80b6f4");
gradientStroke.addColorStop(1, "#94d973");
var YearsExperience = new Chart(ctx, {
type: 'bar',
data: { labels: ArrLabel[idx], datasets: [{ label: 'Years of experience', data: ArrData[idx], backgroundColor: gradientStroke }] },
options: { scales: { xAxes: [{gridLines: {display:false}}], yAxes: [{ ticks: { beginAtZero:true } }] }, events: ['none'],animation: { easing: "easeInOutBack" } }
});
An example of the output can be seen here: http://neophytte.mine.nu/portfolio/skills.html

Categories

Resources