I have a line chart created using ChartJs. I have added a AutoSkip: false in the Y-axis under scales in my javascript as I want to show every single dates from the labels on Y-axis but some of my dates are being skipped.
The dates start from 2022-02-25 and ends at 2022-05-06. But the Y-axis is skipping some of the dates. I do not want that. I want every single dates to be displayed. Can anyone tell me what's wrong with my code?
Below is the sample of my codes:
// setup
const data = {
datasets: [
{label: 'PZ-1',data:[{y:'2022-02-25', x:40.551},{y:'2022-03-01', x:35.889},{y:'2022-03-02', x:34.68},{y:'2022-03-03', x:33.182},{y:'2022-03-04', x:30.82},{y:'2022-03-05', x:29.864},{y:'2022-03-08', x:28.413},{y:'2022-03-10', x:28.413},{y:'2022-03-12', x:28.424},{y:'2022-03-15', x:25.578},{y:'2022-03-17', x:27.07},{y:'2022-03-19', x:27.42},{y:'2022-03-22', x:27.478},{y:'2022-03-24', x:22.817},{y:'2022-03-26', x:22.576},{y:'2022-03-29', x:22.326},{y:'2022-03-31', x:22.011},{y:'2022-04-02', x:21.672},{y:'2022-04-05', x:21.561},{y:'2022-04-07', x:21.307},{y:'2022-04-09', x:34.988},{y:'2022-04-12', x:28.89},{y:'2022-04-14', x:28.618},{y:'2022-04-17', x:28.862},{y:'2022-04-19', x:27.727},{y:'2022-04-21', x:27.493},{y:'2022-04-23', x:27.149},{y:'2022-04-26', x:25.862},{y:'2022-04-28', x:25.59},{y:'2022-04-30', x:25.37},{y:'2022-05-04', x:24.79},{y:'2022-05-06', x:24.927}],backgroundColor: '#FFD700',borderColor: '#FFD700',borderWidth: 1}
]
};
// config
const config = {
type: 'line',
data,
options: {
indexAxis: 'y',
scales: {
x: {
beginAtZero: true
},
y:{
reverse: true,
type: 'time',
ticks: {
autoSkip: false
}
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartCard {
width: 100vw;
height: 100vh;
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 1200px;
padding: 50px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
#media only screen and (min-width: 1600px) {.chartBox {width: 1600px; }}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Line Chart</title>
</head>
<body>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart" style="position: relative;"></canvas>
</div>
</div>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
The time scale by default generates nice ticks because time can be verry far appart. If you want to show all the ticks you will need to set the source in the ticks to 'data'. After that the autoskip property will work.
scales: {
y: {
type: 'time',
ticks: {
source: 'data',
autoSkip: false
}
}
}
Live example:
// setup
const data = {
datasets: [{
label: 'PZ-1',
data: [{
y: '2022-02-25',
x: 40.551
}, {
y: '2022-03-01',
x: 35.889
}, {
y: '2022-03-02',
x: 34.68
}, {
y: '2022-03-03',
x: 33.182
}, {
y: '2022-03-04',
x: 30.82
}, {
y: '2022-03-05',
x: 29.864
}, {
y: '2022-03-08',
x: 28.413
}, {
y: '2022-03-10',
x: 28.413
}, {
y: '2022-03-12',
x: 28.424
}, {
y: '2022-03-15',
x: 25.578
}, {
y: '2022-03-17',
x: 27.07
}, {
y: '2022-03-19',
x: 27.42
}, {
y: '2022-03-22',
x: 27.478
}, {
y: '2022-03-24',
x: 22.817
}, {
y: '2022-03-26',
x: 22.576
}, {
y: '2022-03-29',
x: 22.326
}, {
y: '2022-03-31',
x: 22.011
}, {
y: '2022-04-02',
x: 21.672
}, {
y: '2022-04-05',
x: 21.561
}, {
y: '2022-04-07',
x: 21.307
}, {
y: '2022-04-09',
x: 34.988
}, {
y: '2022-04-12',
x: 28.89
}, {
y: '2022-04-14',
x: 28.618
}, {
y: '2022-04-17',
x: 28.862
}, {
y: '2022-04-19',
x: 27.727
}, {
y: '2022-04-21',
x: 27.493
}, {
y: '2022-04-23',
x: 27.149
}, {
y: '2022-04-26',
x: 25.862
}, {
y: '2022-04-28',
x: 25.59
}, {
y: '2022-04-30',
x: 25.37
}, {
y: '2022-05-04',
x: 24.79
}, {
y: '2022-05-06',
x: 24.927
}],
backgroundColor: '#FFD700',
borderColor: '#FFD700',
borderWidth: 1
}]
};
// config
const config = {
type: 'line',
data,
options: {
indexAxis: 'y',
scales: {
x: {
beginAtZero: true
},
y: {
reverse: true,
type: 'time',
ticks: {
autoSkip: false,
source: 'data'
}
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartCard {
width: 100vw;
height: 100vh;
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 1200px;
padding: 50px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
#media only screen and (min-width: 1600px) {
.chartBox {
width: 1600px;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Line Chart</title>
</head>
<body>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart" style="position: relative;"></canvas>
</div>
</div>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
You must set a height, otherwise it will adjust to the height available and show only some Y-data.
// setup
const data = {
datasets: [
{label: 'PZ-1',data:[{y:'2022-02-25', x:40.551},{y:'2022-03-01', x:35.889},{y:'2022-03-02', x:34.68},{y:'2022-03-03', x:33.182},{y:'2022-03-04', x:30.82},{y:'2022-03-05', x:29.864},{y:'2022-03-08', x:28.413},{y:'2022-03-10', x:28.413},{y:'2022-03-12', x:28.424},{y:'2022-03-15', x:25.578},{y:'2022-03-17', x:27.07},{y:'2022-03-19', x:27.42},{y:'2022-03-22', x:27.478},{y:'2022-03-24', x:22.817},{y:'2022-03-26', x:22.576},{y:'2022-03-29', x:22.326},{y:'2022-03-31', x:22.011},{y:'2022-04-02', x:21.672},{y:'2022-04-05', x:21.561},{y:'2022-04-07', x:21.307},{y:'2022-04-09', x:34.988},{y:'2022-04-12', x:28.89},{y:'2022-04-14', x:28.618},{y:'2022-04-17', x:28.862},{y:'2022-04-19', x:27.727},{y:'2022-04-21', x:27.493},{y:'2022-04-23', x:27.149},{y:'2022-04-26', x:25.862},{y:'2022-04-28', x:25.59},{y:'2022-04-30', x:25.37},{y:'2022-05-04', x:24.79},{y:'2022-05-06', x:24.927}],backgroundColor: '#FFD700',borderColor: '#FFD700',borderWidth: 1}
]
};
// config
const config = {
type: 'line',
data,
options: {
indexAxis: 'y',
maintainAspectRatio: false,
responsive: true,
scales: {
x: {
beginAtZero: true
},
y:{
reverse: true,
type: 'time',
ticks: {
autoSkip: false
}
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartCard {
overflow:auto;
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
padding: 50px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
#media only screen and (min-width: 1600px) {.chartBox {width: 1600px; }}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>F3 Peizometer</title>
</head>
<body>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart" style="position: relative;height:900px;width:400px"></canvas>
</div>
</div>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
Related
I'm using https://www.chartjs.org/. I want to make a chart like a picture.
enter image description here.
but created one is this. enter image description here
It is Sharing X-Axis but has Different Y-Axis by chart type. Left Y-axis is for bar, but the right one is for scatter.
I want the scatter values to be positioned according to each bar chart categories.
current code is below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Getting Started with Chart JS with www.chartjs3.com</title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartMenu {
width: 100vw;
height: 40px;
background: #1a1a1a;
color: rgba(255, 26, 104, 1);
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100vw;
height: calc(100vh - 40px);
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 700px;
padding: 20px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
</style>
</head>
<body>
<div class="chartMenu">
<p>WWW.CHARTJS3.COM (Chart JS 3.8.0)</p>
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/chart.js"
></script>
<script>
const labels = ["label1", "label2", "label3", "label4", "label5"];
// setup
const data = {
labels: labels,
datasets: [
{
type: "bar",
label: "bar 1",
data: [18, 12, 6, 9, 12],
backgroundColor: "rgba(255, 26, 104, 0.2)",
borderColor: "rgba(255, 26, 104, 1)",
borderWidth: 1,
yAxisID: "leftY",
stack: "stack1",
},
{
type: "bar",
label: "bar 2",
data: [18, 12, 6, 9, 12],
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
yAxisID: "leftY",
stack: "stack2",
},
{
type: "scatter",
label: "scatter1",
data: [18, 12, 6, 9, 12],
backgroundColor: "rgba(255, 26, 104, 0.2)",
borderColor: "rgba(255, 26, 104, 1)",
borderWidth: 1,
yAxisID: "rightY",
stack: "stack1",
},
{
type: "scatter",
label: "scatter2",
data: [18, 12, 6, 9, 12],
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
yAxisID: "rightY",
stack: "stack2",
},
],
};
// config
const config = {
data,
options: {
scales: {
x: {
grouped: true,
},
leftY: {
grouped: true,
position: "left",
beginAtZero: true,
},
rightY: {
type: "linear",
position: "right",
beginAtZero: true,
stacked: true,
grouped: true,
},
},
},
};
// render init block
const myChart = new Chart(document.getElementById("myChart"), config);
</script>
</body>
</html>
I want to make a kinda hierarchical graph with JSCharting to upload in Google Data Studio showing a curriculum matrix network and its pre requisites.
I made a graph like this:
Each curriculum semester is a column and the classes are under each semester.
But I need to show the pre requisites network between these semesters.
For example:
EQ101 (in 1st Semester) is a pre requisite to take EQ201 (in 2nd Semester).
MA111 + MA141 (1st Semester) are pre requisites to take MA211 (in 2nd Semester).
How can I show these relationships when user pass the mouse over the classes?
The idea would be show the relationships like this picture, but only with animation with mouse over.
The code I made is like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stacked HTML Node Chart | JSCharting</title>
<meta http-equiv="content-type" content="text-html; charset=utf-8" />
<script type="text/javascript" src="../jsc/jscharting.js"></script>
<script type="text/javascript" src="../jsc/modules/types.js"></script>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<style type="text/css">
.department {
white-space: pre-wrap;
width: 110px;
padding: 5px;
color: #424242;
font-weight: normal;
}
.units {
white-space: pre-wrap;
width: 120px;
height: 200px;
color: #212121;
font-weight: normal;
text-align: center;
font-size: 10px;
}
.units li {
list-style-type: none;
padding: 5px;
margin: 4px 0;
border-radius: 5px;
}
.units ul {
padding: 0;
}
.units hr {
border: none;
background: white;
width: 40px;
height: 1px;
}
</style>
</head>
<body>
<div id="chartDiv" style="width: 810px; height: 430px; margin: 0px auto;"></div>
<script type="text/javascript">
/*
Chart with HTML annotations.
Learn how to:
- Create complex charts.
*/
// JS
var config = {
type: 'organization down',
defaultPoint: {
outline_width: 0,
annotation: {
asHTML: true,
label: {
text: '<div class="department" style="border-bottom:5px solid %color;"><b>%position</b>%name%units</div>',
align: 'center'
}
}
},
defaultSeries: {
mouseTracking_enabled: false,
line: { width: 1, color: '#e0e0e0' }
},
series: [
{
points: [
{
name: '',
id: 'dhr',
attributes: {
position: 'Engenharia Química<br>',
units: ''
},
label_style_fontSize: 14,
color: 'white'
},
{
name: '',
id: 'ca',
parent: 'dhr',
attributes: {
position: '1o Semestre<br>',
units: ''
},
label_style_fontSize: 12,
color: '#ba68c8'
},
{
name: '',
id: 'ca_',
parent: 'ca',
attributes: {
position: '',
units:
'<ul><li><b>EQ101</b><br>Introdução a Processos e Indústrias Químicas</li><li><b>F 128</b><br>Física Geral I</li><li><b>F 129</b><br>Física Experimental I</li><li><b>MA111</b><br>Cálculo I</li><li><b>MA141</b><br>Geometria Analítica e Vetores</li><li><b>GQ101</b><br>Química I</li><li><b>GQ102</b><br>Química Experimental I</li></ul>'
},
label_style_fontSize: 10,
color: '#ce93d8',
annotation_label_text: '<div class="units"><b>%position</b>%name%units</div>'
},
{
name: '',
id: 'ba',
parent: 'dhr',
attributes: {
position: '2o Semestre<br>',
units: ''
},
label_style_fontSize: 12,
color: '#f06292'
},
{
name: '',
id: 'ba_',
parent: 'ba',
attributes: {
position: '',
units:
"<ul><li><b>EQ201</b><br>Balanços de Massa e Energia</li><li><b>MA211</b><br>Cálculo II</li><li><b>MC102</b><br>Algoritmos e Programação de Computadores</li><li><b>ME414</b><br>Estatística para Experimentalistas</li><li><b>QI242</b><br>Química Inorgânica Teórica</li><li><b>QI244</b><br>Química Inorgânica Experimental</li></ul>"
},
label_style_fontSize: 10,
color: '#f48fb1',
annotation_label_text: '<div class="units"><b>%position</b>%name%units</div>'
},
{
name: '',
id: 'rm',
parent: 'dhr',
attributes: {
position: '3o Semestre<br>',
units: ''
},
label_style_fontSize: 12,
color: '#64b5f6'
},
{
name: '',
id: 'rm_',
parent: 'rm',
attributes: {
position: '',
units:
'<ul><li><b>CE304</b><br>Direito</li><li><b>F 328</b><br>Física Geral III</li><li><b>F 329</b><br>Física Experimental III</li><li><b>GT001</b><br>Ciência, Tecnologia e Sociedade</li><li><b>MA311</b><br>Cálculo III</li><li><b>QA313</b><br>Química III (Engenharia Química)</li><li><b>QO323</b><br>Química Orgânica I (Engenharia Química)</li></ul>'
},
label_style_fontSize: 10,
color: '#90caf9',
annotation_label_text: '<div class="units"><b>%position</b>%name%units</div>'
},
{
name: '',
id: 't',
parent: 'dhr',
attributes: {
position: '4o Semestre<br>',
units: ''
},
label_style_fontSize: 12,
color: '#4db6ac'
},
{
name: '',
id: 't_',
parent: 't',
attributes: {
position: '',
units:
'<ul><li><b>EM312</b><br>Desenho Técnico</li><li><b>EQ415</b><br>Termodinâmica I</li><li><b>EQ531</b><br>Aplicações dos Materiais em Engenharia Química</li><li><b>F 315</b><br>Mecânica Geral I</li><li><b>MS211</b><br>Cálculo Numérico</li><li><b>Q0422</b><br>Química Orgânica II (Engenharia Química)</li></ul>'
},
label_style_fontSize: 10,
color: '#80cbc4',
annotation_label_text: '<div class="units"><b>%position</b>%name%units</div>'
}
]
}
]
};
config.series[0].points.forEach(function(point) {
point.attributes.units = point.attributes.units.replace(/<li>/g, '<li style="background-color: %color;">');
});
var chart = JSC.chart('chartDiv', config);
</script>
</body>
</html>
I am trying to display those charts side by side, with the same height for the 2 divs and place the 2 charts inside.
I try to use hard code css for each: "style="height:40vh; width:40vw"" but if I change the screen they are not at the same height anymore
..............................................................................................
This is the code for pie chart:
<div id="canvas-holder" style="height:40vh; width:40vw">
<canvas id="chart-area"></canvas>
</div>
<script>
var view_DA = JSON.parse('#DATA_QUERIED');
var duyanh_lab = [];
var duyanh_data = [];
for (var i = 0; i < view_DA.length; i++) { duyanh_lab.push(view_DA[i].ZONE_NAME); };
for (var i = 0; i < view_DA.length; i++) { duyanh_data.push(view_DA[i].ZONE_VALUE); };
var config = {
type: 'pie',
data: {
datasets: [{
data: duyanh_data,
backgroundColor: [
'dark khaki',
'khaki',
'olive',
'yellow',
'yellow green',
'dark olive green',
'olive drab',
'lawn green',
],
label: 'Dataset 1'
}],
labels: duyanh_lab
},
options: {
responsive: true,
}
};
$(document).ready(function () {
var ctx = document.getElementById('chart-area').getContext('2d');
window.myPie = new Chart(ctx, config);
});
</script>
**and bar-char:**
<div id="container" style="height:40vh; width:40vw">
<canvas id="canvas"></canvas>
</div>
<script>
var view_DA2 = JSON.parse('#DATA_QUERIED');
var duyanh_lab = [];
var duyanh_data = [];
for (var i = 0; i < view_DA2.length; i++) { duyanh_lab.push(view_DA2[i].ZONE_NAME); };
for (var i = 0; i < view_DA2.length; i++) { duyanh_data.push(view_DA2[i].ZONE_VALUE); };
var barChartData = {
labels: duyanh_lab,
datasets: [{
label: 'Thời gian truy cập',
backgroundColor: '#FF6384',
borderColor: '#FF6384',
borderWidth: 2,
hoverBackgroundColor: '#FF6384',
hoverBorderColor: '#FF6384',
data: duyanh_data,
}],
};
$(document).ready(function () {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
}
}
});
});
</script>
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
<script>
var view_DA2 = JSON.parse('#DATA_QUERIED');
var duyanh_lab = [];
var duyanh_data = [];
for (var i = 0; i < view_DA2.length; i++) { duyanh_lab.push(view_DA2[i].ZONE_NAME); };
for (var i = 0; i < view_DA2.length; i++) { duyanh_data.push(view_DA2[i].ZONE_VALUE); };
var barChartData = {
labels: duyanh_lab,
datasets: [{
label: 'Thời gian truy cập',
backgroundColor: [
'red'
],
borderColor: 'red',
borderWidth: 2,
data:
duyanh_data,
}],
};
$(document).ready(function () {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
}
}
});
});
</script>
Try to add display: flex; to your style:
<div id="canvas-holder" style="height:40vh; width:40vw; display: flex;">
The default flex-direction is row.
You'll want to use flexbox to align everything properlly. Use classes to reuse your css everywhere, and you'll be good to go =)
*{
box-sizing: border-box;
}
.container {
width: 90%;
margin: auto;
}
.main_wrapper{
background-color: lightblue;
display: flex;
flex-wrap: row;
justify-content: center;
align-items: center;
height: 900px;
}
.canvas_wrapper{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
background-color: aquamarine;
}
.canvas{
width: 100%;
height: auto;
border: 1px solid black;
}
.title{
font-size: 3vw;
}
<div class="container">
<div class="main_wrapper">
<!--Canvas 1-->
<div class="canvas_wrapper">
<h1 class="title">main canvas</h1>
<canvas class="canvas chart-area"></canvas>
</div>
<!--Canvas 2-->
<div class="canvas_wrapper">
<h1 class="title">second canvas</h1>
<canvas class="canvas chart-area"></canvas>
</div>
<!--Canvas 3-->
<div class="canvas_wrapper">
<h1 class="title">third canvas</h1>
<canvas class="canvas chart-area"></canvas>
</div>
</div>
</div>
Was that what you are looking for ?
I am using c3.js to generate a graph. I want to put an image on top of each bar, on the label. So that the image is shown well I would like the graphic to have a space in the top that gives me the possibility of having the image without leaving the svg
https://jsfiddle.net/ao2xojnx/
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels:true,
type:'bar'
},
axis: {
}
});
There are two ways for doing this. Both have the same result and both need hardcoded values.
First way: set the y axis maximum:
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels: true,
type: 'bar'
},
axis: {
y: {
max: 700
}
}
});
#catImage {
width: 40px;
height: 40px;
position: absolute;
left: 40px;
top: 0px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="chart"></div>
Second way: set the padding.top:
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels: true,
type: 'bar'
},
axis: {
y: {
padding: {top:200, bottom:0}
}
}
});
#catImage {
width: 40px;
height: 40px;
position: absolute;
left: 40px;
top: 0px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="chart"></div>
Pay attention to the fact that, in both ways, you'll have extra ticks in the y axis.
I have 4 pie charts next to each other in a bootstrap grid which all show well in IE11 document modes IE5, IE7, IE9+, but not on IE8.
What it does in document mode IE8:
When I refresh the page with ctrl+f5: the charts show correct. When I refresh with f5: the charts have a way to big container and display out of screen (and way out of the grid)
My JS:
$(function () {
var chart;
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
height: 200
},
legend: {
align: 'right',
verticalAlign: 'top',
x: 0,
y: 40,
layout: 'vertical'
},
credits: {
enabled: false
},
title: {
margin: 30,
style: {
color: '#6e685c',
fontSize: '10px'
}
},
tooltip: {
pointFormat: 'Aantal: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size:'100%',
dataLabels: {
enabled: true,
color: '#454545',
format: '{point.y}',
distance: 10
}
}
}
}
$(document).ready(function () {
// Build the chart
options.title.text = 'Financieel fout';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
}, {
name: 'Fout',
color: '#ac4742',
y: 3
}, {
name: 'Onzeker',
color: '#e09647',
y: 1
}]
}];
$('#graph-1').highcharts(options);
// Build the chart
options.title.text = 'Financieel onzeker';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
},{
name: 'Fout',
color: '#ac4742',
y: 1
}]
}];
$('#graph-2').highcharts(options);
// Build the chart
options.title.text = 'Service desk';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
}, {
name: 'Fout',
color: '#ac4742',
y: 3
}, {
name: 'Onzeker',
color: '#e09647',
y: 1
}]
}];
$('#graph-3').highcharts(options);
// Build the chart
options.title.text = 'Controle';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
},{
name: 'Fout',
color: '#ac4742',
y: 1
}]
}];
$('#graph-4').highcharts(options);
});
$("body").width($("body").width()-200).delay(1000).width($("body").width()+200);
});
The HTML:
<div class="row">
<div class="col-md-6 graph-container border-right">
<h4>Rechtmatigheid</h4>
<div class="clearfix">
<div id="graph-1" class="col-md-6 no-horizontal-padding"></div>
<div id="graph-2" class="col-md-6 no-horizontal-padding border-right"></div>
</div>
</div>
<div class="col-md-3 graph-container border-right no-horizontal-padding">
<h4 class="padding-left">Kwaliteit</h4>
<div class="graph-container">
<div id="graph-3" class=""></div>
</div>
</div>
<div class="col-md-3 graph-container no-horizontal-padding">
<h4 class="padding-left">Workload</h4>
<div class="graph-container">
<div id="graph-4" class="no-horizontal-padding"></div>
</div>
</div>
</div>
And the CSS
/***************************************************************/
/* GRAPHS */
/***************************************************************/
.graph-container{
}
.graph-container.border-right{
border-right: 1px solid #e5e5e5;
}
.graph-container .graphs-info{
margin: 20px 0px;
}
.graphs-info{
color: #6e685c;
line-height: 26px;
}
.graphs-info .content-title{
font-size: 17px;
font-weight: bold;
display: block;
margin-bottom: 20px;
}
.graphs-info .graphs-info-title{
display: inline-block;
margin-right: 6px;
}
.graphs-info .error{
color: #830020;
}
.padding-left{
padding-left: 20px !important;
}
Do I do something wrong or is this a bug? And will this occur in IE8 (actual browser)
Use comments in HTML for IE8, like this:
<!--[if IE 8]>
<style>...</style>
<![endif]-->
The bug didn't occur on IE8 running on Host OS Windows XP. Therefor the problem is actually non-existent. Another heads up that I should really test on actual IE8 and not the document modes.