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.
chart.js Version 2.5.0
It works fine in Google Chrome, but not in IE11. There is no charts shown.
Whats wrong?
<canvas id="ks2" width="500" height="500"></canvas>
<script>
var ctx = document.getElementById("ks2");
var ks2 = new Chart(ctx, {
type: 'bar',
data: {
labels: ["KS2 (1)", "KS2 (2)", "Differenz"],
datasets: [{
label: 'KS2',
data: [25, 35, 10, 0]
}]
}
});
</script>
You can achieve this using a meta tag as follows:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
I'm using chart.js from http://www.chartjs.org/.
I want to draw a pie chart, but nothing is displaying. I managed to draw line chart, so the Javascript is loaded.
HTML
<!-- Chart -->
<script type="text/javascript" src="_javascripts/chart/Chart.min.js"></script>
<!-- //Chart-->
<canvas id="browsersChart" width="400" height="100"></canvas>
<script>
var ctx = document.getElementById("browsersChart");
var myChart = new Chart(ctx, {
type: 'pie',
data: {
datasets: [{
label: 'Browsers',
data: [14, 2, 2, 2, 1],
backgroundColor: [
window.chartColors.red,
window.chartColors.orange,
window.chartColors.yellow,
window.chartColors.green,
window.chartColors.blue,
],
}],
labels: [
"Chrome"
"Firefox"
""
"MSIE"
"Mobile Safari"
]
},
options: {
responsive: true
}
};
</script>
You have some typos in your code.
In the labels section, you need a comma after each label:
labels: [
"Chrome", // These commas at the end need added.
"Firefox",
"",
"MSIE",
"Mobile Safari"
]
You also need to add a ) at the very end of the Chart declaration:
options: {
responsive: true
}
}); // The rounded bracket here needs added
In the future, you should use the dev tools in your browser. The Console tab will tell you about errors like these. It explained exactly what line had errors.
After fixing these typos, I got a pie chart just as expected.
I try to use the plugin zoom from chartjs with the version 7 of the api.
I would like to be able to zoom when the selection of a zone of drag is finished.
Once zoomed, I would like to be able to move the chart to reach the other values.
I have try the v4,v5,v6 whith the zoom plugin but the result is always the same : When I try to select the drag zone all the chart move, it moves incredibly fast and its begin difficult to use it.
May be I don't use correctly the plugin but I've tried some other configuration the result is still the same..
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
responsive: false,
type: 'line',
data: {
labels: [0, 1, 3, 4, 5, 6],
datasets: [{
label: 'Test1',
data: [12, 19, 3, 5, 2, 3]
},{
label: 'Test2',
data: [14, 16, 4, 3, 1, 2]
}
]
},
options: {
pan: {
enabled: true,
mode: 'x',
},
zoom: {
drag: true,
enabled: true,
mode: 'xy'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.5.0/chartjs-plugin-zoom.min.js"></script>
<canvas id="myChart" height=200/>
I solved this problem in my project:
first changed :zoom: {
sensitivity:0.5,
drag: true,
enabled: true,
mode: 'xy'
}
second changed plugin as in this post:
pan on chart.js also zoom on line charts
my plugin version is 5.
How do you remove the underlined data labels for a drilldown pie chart in Highcharts? Adding:
textDecoration: 'none'
to the dataLabels doesn't seem to work
Style for active axis label is set through drilldown.activeAxisLabelStyle
$('#container').highcharts({
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
...
API: http://api.highcharts.com/highcharts#drilldown.activeAxisLabelStyle
Demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/labels/
text {
text-decoration: none !important;
}
will work.
here's your fiddle: http://jsfiddle.net/jkn79qut/
Edit: This answer is better by the way - if you can avoid polluting your css with !important, you should.
Actually, it's "activeDataLabelStyle" the parameter to change.
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
activeDataLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
series: [{.....
jsfiddle
Regards,
I don't know to do it the "highcharts" way, but you can do it in CSS with this:
text {
text-decoration: none !important;
}
The chart has inline code giving it text-decoration: underline;, so you need the !important hack to override it, in this case.
Updated JSFiddle
Here's an embedded example:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the slices to view versions. Source: netmarketshare.com.'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "Microsoft Internet Explorer",
y: 56.33,
drilldown: "Microsoft Internet Explorer"
}, {
name: "Chrome",
y: 24.03,
drilldown: "Chrome"
}, {
name: "Firefox",
y: 10.38,
drilldown: "Firefox"
}, {
name: "Safari",
y: 4.77,
drilldown: "Safari"
}, {
name: "Opera",
y: 0.91,
drilldown: "Opera"
}, {
name: "Proprietary or Undetectable",
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: "Microsoft Internet Explorer",
id: "Microsoft Internet Explorer",
data: [
["v11.0", 24.13],
["v8.0", 17.2],
["v9.0", 8.11],
["v10.0", 5.33],
["v6.0", 1.06],
["v7.0", 0.5]
]
}, {
name: "Chrome",
id: "Chrome",
data: [
["v40.0", 5],
["v41.0", 4.32],
["v42.0", 3.68],
["v39.0", 2.96],
["v36.0", 2.53],
["v43.0", 1.45],
["v31.0", 1.24],
["v35.0", 0.85],
["v38.0", 0.6],
["v32.0", 0.55],
["v37.0", 0.38],
["v33.0", 0.19],
["v34.0", 0.14],
["v30.0", 0.14]
]
}, {
name: "Firefox",
id: "Firefox",
data: [
["v35", 2.76],
["v36", 2.32],
["v37", 2.31],
["v34", 1.27],
["v38", 1.02],
["v31", 0.33],
["v33", 0.22],
["v32", 0.15]
]
}, {
name: "Safari",
id: "Safari",
data: [
["v8.0", 2.56],
["v7.1", 0.77],
["v5.1", 0.42],
["v5.0", 0.3],
["v6.1", 0.29],
["v7.0", 0.26],
["v6.2", 0.17]
]
}, {
name: "Opera",
id: "Opera",
data: [
["v12.x", 0.34],
["v28", 0.24],
["v27", 0.17],
["v29", 0.16]
]
}]
}
});
});
text {
text-decoration: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">Browser Version Total Market Share
Microsoft Internet Explorer 8.0 26.61%
Microsoft Internet Explorer 9.0 16.96%
Chrome 18.0 8.01%
Chrome 19.0 7.73%
Firefox 12 6.72%
Microsoft Internet Explorer 6.0 6.40%
Firefox 11 4.72%
Microsoft Internet Explorer 7.0 3.55%
Safari 5.1 3.53%
Firefox 13 2.16%
Firefox 3.6 1.87%
Opera 11.x 1.30%
Chrome 17.0 1.13%
Firefox 10 0.90%
Safari 5.0 0.85%
Firefox 9.0 0.65%
Firefox 8.0 0.55%
Firefox 4.0 0.50%
Chrome 16.0 0.45%
Firefox 3.0 0.36%
Firefox 3.5 0.36%
Firefox 6.0 0.32%
Firefox 5.0 0.31%
Firefox 7.0 0.29%
Proprietary or Undetectable 0.29%
Chrome 18.0 - Maxthon Edition 0.26%
Chrome 14.0 0.25%
Chrome 20.0 0.24%
Chrome 15.0 0.18%
Chrome 12.0 0.16%
Opera 12.x 0.15%
Safari 4.0 0.14%
Chrome 13.0 0.13%
Safari 4.1 0.12%
Chrome 11.0 0.10%
Firefox 14 0.10%
Firefox 2.0 0.09%
Chrome 10.0 0.09%
Opera 10.x 0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition 0.09%</pre>