So I am trying to contain 2 chart.js in a main div with position:relative. somehow, if I don't set the vw or the vh correctly, they will be outside the container. is there anyway to prevent this?
here is the code:
var ctx = document.getElementById('example1').getContext('2d');
var myLineChart = new Chart(ctx, {
"type": "bar",
"data": {
"labels": ["some", "thing", "came", "up", "today"],
"datasets": [{
"label": "abs_base_notional",
"data": [10.106688, 24.342801, 25.908431, 98.147767, 94.194484],
"backgroundColor": ["#4f5643", "#DAA276", "#6a7587", "#5FA4EC", "#8CB277"],
"borderColor": ["#4f5643", "#DAA276", "#6a7587", "#5FA4EC", "#8CB277"]
}]
},
"options": {
"title": {
"text": "test in (M$)",
"display": true
},
"legend": {
"display": false
},
"scales": {
"xAxes": [],
"yAxes": []
}
}
})
var ctx = document.getElementById('example2').getContext('2d');
var myLineChart = new Chart(ctx, {
"type": "bar",
"data": {
"labels": ["some", "thing", "came", "up", "today"],
"datasets": [{
"label": "base_notional",
"data": [-4.95651, 13.800001, -0.404782, 98.147767, -2.787737],
"backgroundColor": ["#4f5643", "#DAA276", "#6a7587", "#5FA4EC", "#8CB277"],
"borderColor": ["#4f5643", "#DAA276", "#6a7587", "#5FA4EC", "#8CB277"]
}]
},
"options": {
"title": {
"text": "second test (M$)",
"display": true
},
"legend": {
"display": false
},
"scales": {
"xAxes": [],
"yAxes": []
}
}
})
.row {
text-align: center;
margin: auto;
width: 90%;
height: 90%;
border-size: 2px;
border-style: solid;
border-color: black;
}
.chart-container-double {
display: inline-block;
position: relative;
margin: auto;
height: 20vh;
width: 40vw;
border-size: 2px;
border-style: solid;
border-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="row">
<div class="chart-container-double">
<canvas id="example1"></canvas>
</div>
<div class="chart-container-double">
<canvas id="example2"></canvas>
</div>
</div>
Also, I am quite new to html/css/js so I see that there is errors but I don't know how to fix them. any help would be appreciated!
thanks
you should learn about flex-box. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without having to use floats or positioning.
you can start here : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Another option is to use Bootstrap.
Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range. You can use it with Sass mixins or our predefined classes.
https://getbootstrap.com/
hope this helps
Related
I am using chart.js to show a line chart in an Angular component. The code does not have any padding or margins added for the chart. I added styling to set the padding and margin to zero both in the create the chart in the .ts file and in the style sheets and nothing makes any difference. When I inspect the element in Chrome developer mode it does not show any padding or margins, so I think the styling is internal to chart.js. Below is a screenshot with the chart element highlighted in Chrome developer mode.
As you can see, there is a margin or border on the left, bottom and right of the chart canvas element, but strangely not at the top. The spacing between the Y-Axis labels and the left of the chart are especially bad when viewed on a mobile phone so I really need to remove it. I have spent hours setting every element I can think of to have 0 padding and 0 margins and trying different changes to the code and style sheets and searching through other articles on the Internet including Stackoverflow but none of them seem to answer this specific question.
I also tried adding box-sizing:border-box; to the div container containing the chart but it did not make any difference, i.e. as suggested in this article:
Why is chart.js canvas not respecting the padding of the container element?
Here is my chart configuration:
this.myChart = new Chart("chartCanvas", {
type: 'line',
data: {
labels: labelVars,
datasets: datasets
},
options: {
elements: {
point: {
radius: 0
},
},
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'index',
intersect: false,
enabled: width > 640
},
hover: {
mode: 'nearest',
intersect: true
},
legend: {
display: false,
position: 'bottom',
labels: {
}
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'week',
tooltipFormat: 'MM/DD/YYYY'
},
display: true,
scaleLabel: {
display: true,
labelString: ''
},
ticks: {
autoSkip: true,
padding: 0,
maxTicksLimit: this.getTickLimit(),
maxRotation: this.getRotation(),
minRotation: this.getRotation()
},
gridLines: {
display: false,
offsetGridLines: true
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
},
ticks: {
maxTicksLimit: 6,
beginAtZero: false
}
}]
}
}
});
Here is the current html:
<div class="chartContainer">
<canvas *ngIf="displayChart" id="chartCanvas"></canvas>
</div>
And here is the current css:
#chartCanvas {
padding-left: 0;
margin-left: 0;
}
.chartContainer {
height: 500px;
margin: 0;
padding: 0;
align-items: left;
align-self: left;
align-content: left;
}
Has anyone else encountered this problem?
I found the problem. I had the scaleLabel turned on but was not showing a scale label, which was adding extra space. I changed scaleLabel display to false as shown below and the space went away:
yAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: ''
},
Depending on your chartjs config, you just have to set the padding of the chart.js config.
Info: Offset's in the canvas cannot be altered with css, since the chart is "drawn" on it.
(details: in the documentation)
For a example:
const config = {
type: 'line',
data: data,
options: {
...
plugins: {
....
},
scales:{
x: {
ticks:{ padding:0 }
}
},
}
};
I'm trying to give a background colour to my ApexCharts polarArea chart (I want the areas marked by red dots in the image to be grey/white):
I can't find a way to do this. I've tried adding fill to the various options, but nothing. I thought it might be possible with polygons like the radar chart, but no.
The closest I have come is by adding a CSS class to the chart on the containing Vue component:
<Chart class="chart" :myValues='this.myValues' :key="componentKey" />
.chart {
width: 320px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 50%;
margin: auto;
padding-top: 3px;
padding-right: 4px;
}
But annoyingly it's not centred on the chart origin and even with pixel precise increments to padding it's not quite right! Also, if possible I'd like alternating colours for each of the rings, like is possible with the radar chart.
My full chart Vue component:
<template>
<div class="polarChart">
<apexcharts height="360" type="polarArea" :options="chartOptions" :series="series"></apexcharts>
</div>
</template>
<style scoped>
.polarChart {
align-items: center;
}
</style>
<script>
import VueApexCharts from 'vue-apexcharts'
export default {
name: 'Chart',
components: {
apexcharts: VueApexCharts,
},
props: ['myValues'],
data: function() {
return {
series: this.myValues,
plotOptions: {
polarArea: {
dataLabels: {
offset: 30
},
}
},
chartOptions: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
colors:['#403d39', '#ffbe0b', '#00b4d8', '#e73265', '#90be6d', '#ada7c9'],
legend: {
show: false
},
yaxis: {
max: 100,
show: false
},
xaxis: {
categories: ['A.', 'B.', 'C.', 'D.', 'E.', 'F.']
},
dataLabels: {
enabled: true,
formatter: function (val, opts) {
return Math.round(opts.w.globals.series[opts.seriesIndex]) + "% " + opts.w.globals.labels[opts.seriesIndex]
},
background: {
enabled: true,
borderRadius:2,
},
style: {
colors: ['#403d39', '#ffbe0b', '#00b4d8', '#e73265', '#90be6d', '#ada7c9'],
}
},
tooltip: {
// enabled: false
},
chart: {
type: 'polarArea',
},
stroke: {
colors: ['#fff']
},
fill: {
opacity: 1
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: '100%'
},
legend: {
position: 'bottom'
}
}
}]
},
}
},
methods: {
addData(){
this.updateChart();
},
updateChart() {
this.series = [{
data: this.freshnessValues
}]
}
},
}
</script>
I am using cytoscape.js to display a directed graph and I display 2 properties in a label.
I want to wrap the text and this is said to be possbile in the documentation but I cant get it to work. Can anyone help with the syntax?
'label': 'data(name)',
'font-size' : 14
'text-wrap': 'wrap/n'
text-wrap does not seem to work, it hangs up the graph display.
Do I need to set 'text-max-width'?
thanks in advance
You can't add the \n in the text-wrap css property, you are looking for the label property:
{
"selector": ".multiline-manual",
"style": {
"text-wrap": "wrap"
}
},
{
"selector": ".multiline-auto",
"style": {
"text-wrap": "wrap",
"text-max-width": 80
}
},
One of these classes should be added to the node you want your label to be wrapped. You can do it like this:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: "node",
css: {
content: "data(name)",
height: "60px",
width: "60px"
}
},
{
selector: "edge",
css: {
"target-arrow-shape": "triangle"
}
},
{
selector: ".multiline-manual",
style: {
"text-wrap": "wrap"
}
},
{
selector: ".multiline-auto",
style: {
"text-wrap": "wrap",
"text-max-width": 80
}
}
],
elements: {
nodes: [{
data: {
id: "n0",
name: "This is a very long name and all I have to do is to add a class!"
},
classes: "multiline-auto"
},
{
data: {
id: "n1",
name: "Shorter"
},
classes: "multiline-auto"
},
{
data: {
id: "n2",
name: "This shouldn't wrap"
},
classes: "multiline-manual"
},
{
data: {
id: "n3",
name: "This should\nwrap"
},
classes: "multiline-manual"
}
],
edges: [{
data: {
source: "n0",
target: "n1"
}
},
{
data: {
source: "n1",
target: "n2"
}
},
{
data: {
source: "n1",
target: "n3"
}
}
]
},
layout: {
name: "dagre",
padding: 5
}
}));
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape#3.3.0/dist/cytoscape.min.js">
</script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I basically have two graphs and a sidebar.
Here's a fiddle demonstrating it:
https://jsfiddle.net/NibblyPig/b54qjavu/
Without min-width: 0 in the CSS the layout is badly broken with it stretching off the screen somehow even though that shouldn't be possible with a parent width of 100%.
Without calling the chart reflow method at the bottom of the javascript, the charts overflow off the screen.
Reflow kinda fixes it but despite both divs having flex-grow:1 they end up different sizes, again despite both having flex-grow: 1
If you resize the window itself, i.e. restore/maximise it the layout breaks even more, with the left div taking something like 20% of the width.
Any idea how I can fix this?
Pasted JS fiddle code below:
<div id='parent'>
<div id='columns'>
<div id='leftcolumn'>
<div id='chart1'>
</div>
<div id='chart2'>
</div>
</div>
<div id='rightcolumn'>
This is the right column.
</div>
</div>
</div>
CSS:
#parent {
display: flex;
width: 100%;
flex-direction: row;
height: 100vh;
min-width: 0;
}
#columns {
display: flex;
width: 100%;
flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
}
#leftcolumn {
display:flex;
flex-grow: 1;
flex-direction: row;
flex-shrink: 1;
min-width: 0;
}
#rightcolumn: {
flex-grow: 0;
display: flex;
width: 200px;
min-width: 0;
}
JS:
$(function () {
var myChart = Highcharts.chart('chart1', {
chart: {
type: 'bar'
},
title: {
text: 'Monthly Statistics'
},
xAxis: {
categories: ['ABC', 'DEF']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'This Month',
data: [4, 1]
}, {
name: 'Average',
data: [3, 2]
}]
});
var myChart2 = Highcharts.chart('chart2', {
chart: {
type: 'pie'
},
title: {
text: 'ABCDEF'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'AXD',
y: 67.34,
sliced: true,
selected: true
}, {
name: 'ERT',
y: 11.88
}, {
name: 'ASD',
y: 20.78
}]
}]
});
});
I've fixed this by applying flex-basis: 50% to the parent container and a call to resize upon first loading the page with window.setTimeout(function () { myChart.reflow(); myChart2.reflow(); });
Here is the updated fiddle:
https://jsfiddle.net/NibblyPig/b54qjavu/2/
I'm using a template in a kendo grid to create checkbox:
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{
field:'<div style="text-align: center"><input id="masterCheck" class="k-checkbox" type="checkbox" /><label class="k-checkbox-label" for="masterCheck"></label></div>',
template: '<div style="text-align: center"><input id="${ProductName}" type="checkbox" class="k-checkbox rowSelect"/><label class="k-checkbox-label" for="${ProductName}"></label></div>',
headerAttributes:{ style:"text-align:center"},
width: 38,
editable: false,
sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
]
});
});
Here's a dojo of the code: http://dojo.telerik.com/IVopi
You'll notice the checkbox is in not centered in the grid cell. How can I center the checkbox in the grid cell?
In the templates you can lose the DIV and just include the checkbox and label. Then use attributes and headerAttributes to give the cell and header cell class names:
{
field:'<input id="masterCheck" class="k-checkbox" type="checkbox" /><label class="k-checkbox-label" for="masterCheck"></label>',
template: '<input id="${ProductName}" type="checkbox" class="k-checkbox rowSelect"/><label class="k-checkbox-label" for="${ProductName}"></label>',
headerAttributes:{
"class": "checkbox-header-cell",
},
attributes: {
"class": "checkbox-cell",
},
width: 38,
editable: false,
sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
Now use CSS with those class names to center the checkboxes:
<style>
.checkbox-cell {
text-align: center !important;
padding: 0 !important;
}
.checkbox-header-cell {
text-align: center !important;
padding: 0 !important;
}
.checkbox-header-cell .k-checkbox-label:before {
margin-top: -12px !important;
}
</style>
You can play around with the CSS to get exactly what you want...
The reason why the content of the cell isn't centered is that the cell itself, the <td> element, has padding.
You can either remove this padding by overriding the styling of the grid or by applying a negative margin value to the content of your cell template.
Replace the text-align: center style you entered in your template with margin: -8px and the checkbox will be better positioned.