Related
I'm trying to get the labels of the x-axis in the bar chart to NOT be positioned directly under each bar (which is default setting) but instead stand in the left / right side of the bars. As it is preferred when drawing a histogram. The left and right label of each bar would then be the interval for that bar.
I found out from the documentation it has something to do with the property grid:{offset:true} that I should apply to the x-axis, but the code isn't working for me. The labels are still directly underneath each bar.
Documentation
What am I doing wrong? Any help is much appreciated!
const ctx = document.getElementById('canvas').getContext('2d');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: [0, 1, 2, 3, 4, 5, 6, 7],
datasets: [{
label: 'Number of Arrivals',
data: [19, 28, 20, 16, 50, 65, 58],
backgroundColor: 'green',
}]},
options: {
scales: {
xAxes: [{
display: false,
ticks: {max: 10,},
grid: {offset: true}},
{
display: true,
ticks: {autoSkip: false, max: 10,},
grid: {offset: true}
}],
yAxes: [{
ticks: {beginAtZero: false}
}]
}
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
</head>
<body>
<h1>The select element</h1>
<canvas id="canvas" aria-label="Canvas with graph" role="img"></canvas>
</body>
</html>
The main reason you can't get it to work is because you use the code from this question, which is written for version 2.7, and you are using version 3.2. There are many breaking changes with version 3, including many different names in the options.
I couldn't get it working either, but it should be easily possible with a 3.x version.
Here's a link to a GitHub post including a jsfiddle link.
I have built a website that includes a number of graphics and maps from HighCharts. All of them work great on Firefox, Safari, Chrome, Opera, Microsoft Edge and on cell phones, but for some reason none of them will render on any version of Internet Explorer. I am actually hoping to just get it to render on IE 11 and not worry about the rest as they are no longer supported by Microsoft, but so far, I am unable to find the problem. I have attached the code for one of the simpler graphics I'm using for folks to review.
I have tried some of the common recommendations I have found online; namely, I have set it up so that there are no duplicates of the required HighCharts and jQuery scripts for any given page, and I have the following meta tag in the head of each page on the site.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I would be grateful for any help figuring out how to resolve this problem. Here's a link to the site in question: http://165.22.82.145
Here are the scripts I'm using for this particular example, which are located on each page under Header Scripts (this is a WordPress site):
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
Here is the code for the graphic:
Highcharts.chart('container-2', {
chart: {
backgroundColor: '#f3f7fa',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: ['ciudadanos', 'instituciones', 'social', 'económica', ],
title: {
text: null
}
},
yAxis: {
min: 1,
title: {
text: 'Total'
},
max: 10,
endOnTick: false,
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ''
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
align: 'center',
x: 0
}
},
chartOptions: {
chart: {
events: {
load: function() {
this.renderer.image('#',
275, // x
20, // y
75, // width
40, // height
).add();
}
}
}
}
},
series: [{
name: '2019',
showInLegend: false,
color: '#6497b1',
data: [5.512, 7.592, 0.628, 0.894]
}, {
name: '2018',
showInLegend: false,
color: '#dc005a',
data: [6.553, 5.319, 0.499, 1.495]
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<h2 class="doubletab">Title here <br>2018 - 2019</h2>
<div class="ranking-graphic-wrapper">
<div id="container-2" style="width:100%; height:450px">
</div>
</div>
I tested the issue on Internet Explorer, and the console shows an error in this bit of code :
load: function() {
this.renderer.image('#',
275, // x
20, // y
75, // width
40, // height
).add();
The error can come from the last trailing comma after 40, which is a syntax that is not supported by Internet Explorer : Trailing commas
Currently I have two graphs I'm rendering on a page, I'm using google's visualization Charts lib and due to page sizing issues the vAxes refuses to render some/most of the time.
If I give it enough space, it will render the axes fine, but if it's even slightly off, even when there's plenty of space for these bloody axes, they just refuse to render, I can't have that!
I looked into it and it seems to be rendering bunch of tags when it works and doesn't render when it doesn't work, which makes me think there ought to be some bull if-else "AI" that actively chooses to sabotage me! FS!
Has anyone had experience with Charts and managed to find a workaround on forcing the lib to render the vAxes regardless of what google "AI" wills? (Seriously, what happened to second law of robotics?! OBEY ME, SCUM!)
Sorry, I'm a bit irked atm.
Edit: Sorry, to provide the details, here's the js block rendering the charts:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the chart package.
google.charts.load('visualization', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
hAxis: {showTextEvery: 5},
vAxes: {
0: {textPosition: 'out',
viewWindowMode:'pretty',
viewWindow: {min:0},
gridlines: {color: 'transparent'},
},
1: { textPosition: 'out',
viewWindow: {min:0},
gridlines: {color: 'transparent'}
},
},
seriesType: 'bars',
series: {0: {targetAxisIndex:0, type: 'line'},
1:{targetAxisIndex:1},
2:{targetAxisIndex:1},
}
};
//Chart render
var data1 = new google.visualization.DataTable(<?=$jsonEventType?>);
var chart1 = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart1.draw(data1, options);
}
div element:< div id="chart_div1" style=" height: 100%;"> (it's within multiple other divs, but that's besides the point)
As you can tell it's a basic c-c-c-combo chart, the $jsonEventType doesn't matter i think but here it is:
string(661) "{"cols":[{"label":"Date","type":"string"},{"label":"To Audit","type":"number"},{"label":"Open","type":"number"},{"label":"Closed","type":"number"}],"rows":[{"c":[{"v":"05/07/2018"},{"v":437},{"v":0},{"v":8}]},{"c":[{"v":"12/07/2018"},{"v":419},{"v":0},{"v":21}]},{"c":[{"v":"19/07/2018"},{"v":401},{"v":56},{"v":36}]},{"c":[{"v":"26/07/2018"},{"v":385},{"v":0},{"v":20}]},{"c":[{"v":"02/08/2018"},{"v":369},{"v":0},{"v":12}]},{"c":[{"v":"09/08/2018"},{"v":357},{"v":0},{"v":25}]},{"c":[{"v":"16/08/2018"},{"v":348},{"v":0},{"v":18}]},{"c":[{"v":"23/08/2018"},{"v":336},{"v":0},{"v":14}]},{"c":[{"v":"30/08/2018"},{"v":316},{"v":0},{"v":13}]}]}"
you can use the chartArea config code to ensure there is enough room on either side of the chart.
by default, the chart will follow the size of the container,
but it does not entirely fill the container.
I like to use the chartArea option,
to stretch the chart to the height and width of the container,
and leave room on the edges for the axes and legend, etc...
chartArea: {
top: 32, // leave room on top for legend
left: 60, // for axis index 0
right: 60, // for axis index 1
bottom: 32, // for x-axis
height: '100%', // stretch height
width: '100%', // stretch width
},
height: '100%', // ensure fills height of container
width: '100%', // fills width of container
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({"cols":[{"label":"Date","type":"string"},{"label":"To Audit","type":"number"},{"label":"Open","type":"number"},{"label":"Closed","type":"number"}],"rows":[{"c":[{"v":"05/07/2018"},{"v":437},{"v":0},{"v":8}]},{"c":[{"v":"12/07/2018"},{"v":419},{"v":0},{"v":21}]},{"c":[{"v":"19/07/2018"},{"v":401},{"v":56},{"v":36}]},{"c":[{"v":"26/07/2018"},{"v":385},{"v":0},{"v":20}]},{"c":[{"v":"02/08/2018"},{"v":369},{"v":0},{"v":12}]},{"c":[{"v":"09/08/2018"},{"v":357},{"v":0},{"v":25}]},{"c":[{"v":"16/08/2018"},{"v":348},{"v":0},{"v":18}]},{"c":[{"v":"23/08/2018"},{"v":336},{"v":0},{"v":14}]},{"c":[{"v":"30/08/2018"},{"v":316},{"v":0},{"v":13}]}]});
var options = {
chartArea: {
top: 32, // leave room on top for legend
left: 60, // for axis index 0
right: 60, // for axis index 1
bottom: 32, // for x-axis
height: '100%', // stretch height
width: '100%', // stretch width
},
height: '100%', // ensure fills height of container
width: '100%', // fills width of container
hAxis: {showTextEvery: 5},
vAxes: {
0: {
textPosition: 'out',
viewWindowMode:'pretty',
viewWindow: {min: 0},
gridlines: {color: 'transparent'},
},
1: {
textPosition: 'out',
viewWindow: {min: 0},
gridlines: {color: 'transparent'}
},
},
seriesType: 'bars',
series: {
0: {targetAxisIndex:0, type: 'line'},
1: {targetAxisIndex:1},
2: {targetAxisIndex:1},
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart.draw(data, options);
window.addEventListener('resize', function () {
chart.draw(data, options);
});
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
#chart_div1 {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1"></div>
I have created a treemap using Highcharts, but the top and left borders are missing. I've been reading through the docs but can't find anything which will help.
I have created a Codepen here. You can see that against the black background the borders along the top and left sides of the series aren't visible. I think they're there, but maybe the chart is offset on the X/Y by a pixel or something.
Highcharts.setOptions({
colors: ['#263542', '#3d4d5d', '#41474d', '#515961', '#292e33', '#24445e'],
lang: {
thousandsSep: ','
}
});
Highcharts.chart('treemap', {
chart: {
backgroundColor: 'rgba(255,255,255,0)',
borderColor: 'rgb(255,255,255)'
},
credits: {
enabled: false
},
plotOptions: {
series: {
colorByPoint: true,
borderColor: 'rgb(71, 116, 135)',
borderWidth: 1,
dataLabels: {
enabled: true,
style: {
textOutline: 'none',
fontFamily: 'Roboto',
fontWeight: '300',
fontSize: '1rem'
}
}
}
},
tooltip: {
valuePrefix: '£'
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'Indices',
value: 230000,
}, {
name: 'Forex',
value: 120000,
}, {
name: 'Shares',
value: 55000,
}, {
name: 'Pension',
value: 55000,
}, {
name: 'ISA',
value: 20000,
}]
}],
title: {
text: ''
},
legend: {
enabled: false
}
});
body {
background: #000;
}
#treemap {
width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap"></div>
I cannot comment yet, so this is not really and answer. But I found that if you change your borderWidth to 2, then the border becomes visible. To me this indicates that the margin or padding of your element is covering up the border in the top left section of the element for some reason. Hope this can point you in some sort of direction.
It looks like, even though axes (xAxis/yAxis) are not visible in treemap chart, they have impact on it, by covering left and top part of the border. Setting the offset property in both axes with small value (e.g. 1) will move them away from plot area, uncovering missing border parts.
API Reference:
http://api.highcharts.com/highcharts/yAxis.offset
http://api.highcharts.com/highcharts/xAxis.opposite
Example:
http://jsfiddle.net/20oh9c3d/
I'm new in highcharts and I'm trying to do a graphic with bars and a line. The bars represent the average of set values and the line represents the real value of the set.
I generated the set randomly with 100 values, but the graphic interface sees horrible when I run chart in Jsfiddle. I put a drag selection zoom but is not comfortable to use. Then I decided to put an horizontal scroll and I've seen in Stack Overflow posts that I must to include highstock.js, enable scrollbar and set parameter min and max to enable scroll scrolling. I did it and my chart works but without the scroll.
Link to the Chart: http://jsfiddle.net/zd12fa5L/2/
According to Jsfiddle, my HTML is:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
<div id="report"></div>
And the JSON is:
// create the chart
Highcharts.chart('container', {
chart: {
events: {
selection: function (event) {
var text,
label;
if (event.xAxis) {
text = 'min: ' + Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' + Highcharts.numberFormat(event.xAxis[0].max, 2);
} else {
text = 'Selection reset';
}
label = this.renderer.label(text, 100, 120)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
},
zoomType: 'x'
},
title: {
text: 'Chart selection demo'
},
subtitle: {
text: 'Click and drag the plot area to draw a selection'
},
xAxis: {
min: 0,
max:9,
categories: ['Subject1','Subject2','Subject3','Subject4','Subject5','Subject6','Subject7','Subject8','Subject9',
'Subject10','Subject11','Subject12','Subject13','Subject14','Subject15','Subject16','Subject17',
'Subject18','Subject19','Subject20','Subject21','Subject22','Subject23','Subject24','Subject25',
'Subject26','Subject27','Subject28','Subject29','Subject30','Subject31','Subject32','Subject33',
'Subject34','Subject35','Subject36','Subject37','Subject38','Subject39','Subject40','Subject41',
'Subject42','Subject43','Subject44','Subject45','Subject46','Subject47','Subject48','Subject49',
'Subject50','Subject51','Subject52','Subject53','Subject54','Subject55','Subject56','Subject57',
'Subject58','Subject59','Subject60','Subject61','Subject62','Subject63','Subject64','Subject65',
'Subject66','Subject67','Subject68','Subject69','Subject70','Subject71','Subject72','Subject73',
'Subject74','Subject75','Subject76','Subject77','Subject78','Subject79','Subject80','Subject81',
'Subject82','Subject83','Subject84','Subject85','Subject86','Subject87','Subject88','Subject89',
'Subject90','Subject91','Subject92','Subject93','Subject94','Subject95','Subject96','Subject97',
'Subject98','Subject99','Subject100']
},
scrollbar: {
enabled: true
},
series: [{
type: 'column',
name: 'Average',
data: [514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0 ]
},
{
name: 'Value',
data: [11.0,11.0,118.0,126.0,131.0,142.0,159.0,172.0,178.0,181.0,182.0,186.0,189.0,206.0,218.0,219.0,221.0,238.0, 256.0,260.0,272.0,282.0,283.0,300.0,317.0,337.0,351.0,360.0,404.0,424.0,425.0,438.0,446.0,456.0,462.0,
464.0,468.0,469.0,479.0,488.0,494.0,501.0,501.0,503.0,504.0,516.0,518.0,519.0,522.0,530.0,531.0,533.0,
534.0,537.0,549.0,563.0,565.0,573.0,577.0,599.0,608.0,631.0,638.0,641.0,649.0,668.0,674.0,68.0,68.0,
683.0,7.0,727.0,735.0,748.0,749.0,771.0,782.0,783.0,799.0,831.0,839.0,844.0,847.0,847.0,854.0,86.0,867.0,
873.0,888.0,891.0,894.0,896.0,898.0,910.0,918.0,938.0,944.0,963.0,981.0,999.0
]
}]
});
Thank you, regards.
Read Scrollbars for any axis
Include only <script src="https://code.highcharts.com/stock/highstock.js"></script> and remove <script src="https://code.highcharts.com/highcharts.js"></script>. Then scrollbar will appear.
Fiddle demo