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/
Related
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}],
}
}
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?
I am using apex chart for modern and flexible charts. (https://apexcharts.com/).
Here is my code snippet:
var options = {
chart: {
height: 15,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: [{
name: "Desktops",
data: [10, 5, 2, 15, 12, 11, 10, 1, 0]
}],
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
}
var chart = new ApexCharts(
document.getElementById("chart"),
options
);
chart.render();
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
As you can see the height of the chart is a no go. Its cause by the small numbers. When I would have data over 100 it works, but with small numbers, I have this problem. Any solutions to fix this?
~filip
try increasing chart.height to 200.
this allows the chart to be visible.
see following working snippet...
var options = {
chart: {
height: 200,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: [{
name: "Desktops",
data: [10, 5, 2, 15, 12, 11, 10, 1, 0]
}],
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
}
var chart = new ApexCharts(
document.getElementById("chart"),
options
);
chart.render();
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
I'm building a stacked column chart using highcharts which shows data by month over a 24 month period which will often go over three years.
My current code is as follows:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Mar', 'Feb', 'Jan', 'Dec', 'Nov', 'Oct', 'Sep', 'Aug', 'Jul', 'Jun', 'May', 'Apr', 'Mar', 'Feb', 'Jan', 'Dec', 'Nov', 'Oct', 'Sep', 'Aug', 'Jul', 'Jun', 'May', 'Apr']
},
yAxis: {
min: 0,
title: {
text: 'Total investments'
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Bad',
data: [90000, 100000, 110000, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
name: 'OK',
data: [0, 100000, 0, 0, 0, 0, 0, 0, 100000, 0, 0, 0, 0, 0, 0, 100000, 0, 0, 0, 0]
}, {
name: 'Good',
data: [250000, 290000, 210000, 300000, 320000, 190000, 200000, 210000, 210000, 210000, 250000, 290000, 210000, 300000, 320000, 190000, 200000, 210000, 210000, 210000]
}]
});
});
JSFiddle of my current set up is here and hoping someone can how I'd be able to wrap each group of months in their relevant year as shown in this image:
You can use extension, which allows to group categories.
http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories
I am using Highcharts to draw a line graph.
When the page loads, the line graph is drawn. Please note, that i got an y-Value for every x-Value starting from 0 till 700 ( 0,1,2,3,...,700). This is how i create the graph:
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false,
type: 'line',
marginTop: null,
marginRight: 55,
marginBottom: 50,
marginLeft: 80,
backgroundColor: backgroundColor,
spacingTop: 10,
spacingRight: 10,
spacingBottom: 15,
spacingLeft: 10,
},
title: {
text: ' Graph',
style: {color: graphLabelColor},
x: -20 //center
},
xAxis: {
title: {
text: 'xAXIS',
style: {
color: axisLabelColor
},
},
min:0,
max: 600,
gridLineColor: gridLineColor,
minorTickInterval: 50,
minorTickLength: 1,
tickInterval: 100,
minorGridLineWidth: 0,
gridLineWidth: 1,
lineColor: axisColor,
labels: {
style : {
color: axisColor
}
},
plotLines: [{
value: 0,
width: 0,
color: axisColor
}]
},
yAxis: {
title: {
text: 'yAxis',
style: {color:
axisLabelColor
},
},
min:0,
max: 700,
gridLineColor: gridLineColor,
lineColor: axisColor,
minorTickInterval: 50,
minorTickLength: 1,
minorGridLineWidth: 0,
tickInterval: 100,
labels: {
style: {
color: axisColor
}
},
plotLines: [{
value: 0,
width: 0,
color: axisColor
}]
},
exporting: {
enabled: false
},
tooltip: {
enabled: true,
borderColor: crosshairColor,
crosshairs: [{
width: 1,
color: crosshairColor,
},
{
width: 1,
color: crosshairColor,
}],
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+this.y +' & '+ this.x.toFixed(0);
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 1,
borderColor: plotlineColor,
enabled: false,
floating: true,
shadow: true
},
plotOptions: {
series: {
enableMouseTracking: true
},
line: {
color:plotlineColor,
},
},
series: [{
lineWidth: 2,
name: carname,
data: dataArray,
marker: {
color:crosshairColor,
radius: 1
}
}]
});
In my HTML-Page I got two buttons to increase/decrease (+1/-1) a number in a textfield, starting at 200. The number represents a x-Coordinate in the graph.
I would like to highlight the shown number of my textfield in the graph with another color and a bigger point when the graph is loaded the first time and also when the user changes the number using one of these buttons. How can I do this?
I tried
chart.series[0].options.data[valueOfTextfield].color = 'yellow';
chart.redraw(true);
in the onclick method of the buttons but it doesnt work.
Thanks for your answers!
Using a marker we can do this:
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, { marker: {
fillColor: '#FF0000',
lineWidth: 3,
lineColor: "#FF0000" // inherit from series
},y:71.5}, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
http://jsfiddle.net/zR4Kn/
use the select method of the point object
https://api.highcharts.com/highcharts/series.line.point.events.select