Avatarantella
Reputation: 99
Customizing spacing between labels on x-axis using ng2-google-charts in Angular
I'm migrating some AngularJS code into modern Angular using ng2-google-charts and am running into an issue forcing a gap into the graph.
The application involves two google graphs - one that gives a line chart and overlaps another graph that gives an area chart. My problem is that in the original AngularJS application there is a small gap between 1900 and 2015, but I'm not sure how to accomplish that in the new Angular code. The configuration of the charts and data is the same in both versions. The new version is using ng2-google-charts while the old version just used the Google Charts API directly, but that is the only difference.
This is what the original one looks like with the gap between 1900 and 2015 on the area chart so the line chart will fit between them.
And this is what the new version looks like - no gap and I'm not sure how to make one. This is where I need help.
app.component.ts
import { Component } from '@angular/core';
import { GoogleChartInterface } from 'ng2-google-charts/google-charts-interfaces';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'chart';
public lineChart: GoogleChartInterface = {
chartType: 'LineChart',
dataTable: [ ["Year", "Temp"],
[1880, 0.54],
[1881, 0.648],
[1882, 0.648],
[1883, 0.504],
[1884, 0.396],
[1885, 0.36],
[1886, 0.396],
[1887, 0.306],
[1888, 0.486],
[1889, 0.576],
[1890, 0.18],
[1891, 0.324],
[1892, 0.216],
[1893, 0.198],
[1894, 0.27],
[1895, 0.36],
[1896, 0.612],
[1897, 0.558],
[1898, 0.306],
[1899, 0.558],
[1900, 0.648],
[1901, 0.522],
[1902, 0.324],
[1903, 0.162],
[1904, 0.018],
[1905, 0.252],
[1906, 0.396],
[1907, 0.108],
[1908, 0],
[1909, 0.018],
[1910, 0.108],
[1911, 0],
[1912, 0.198],
[1913, 0.216],
[1914, 0.54],
[1915, 0.666],
[1916, 0.27],
[1917, 0.234],
[1918, 0.414],
[1919, 0.414],
[1920, 0.414],
[1921, 0.522],
[1922, 0.378],
[1923, 0.396],
[1924, 0.342],
[1925, 0.522],
[1926, 0.666],
[1927, 0.522],
[1928, 0.468],
[1929, 0.252],
[1930, 0.612],
[1931, 0.648],
[1932, 0.576],
[1933, 0.342],
[1934, 0.594],
[1935, 0.522],
[1936, 0.576],
[1937, 0.738],
[1938, 0.72],
[1939, 0.756],
[1940, 0.936],
[1941, 1.116],
[1942, 1.044],
[1943, 1.044],
[1944, 1.296],
[1945, 1.08],
[1946, 0.756],
[1947, 0.684],
[1948, 0.684],
[1949, 0.666],
[1950, 0.486],
[1951, 0.756],
[1952, 0.81],
[1953, 0.936],
[1954, 0.558],
[1955, 0.522],
[1956, 0.414],
[1957, 0.864],
[1958, 0.972],
[1959, 0.882],
[1960, 0.81],
[1961, 0.9],
[1962, 0.936],
[1963, 0.954],
[1964, 0.504],
[1965, 0.63],
[1966, 0.72],
[1967, 0.738],
[1968, 0.72],
[1969, 0.936],
[1970, 0.828],
[1971, 0.63],
[1972, 0.81],
[1973, 1.062],
[1974, 0.63],
[1975, 0.774],
[1976, 0.63],
[1977, 1.116],
[1978, 0.972],
[1979, 1.17],
[1980, 1.242],
[1981, 1.314],
[1982, 1.098],
[1983, 1.386],
[1984, 1.026],
[1985, 1.008],
[1986, 1.17],
[1987, 1.44],
[1988, 1.44],
[1989, 1.296],
[1990, 1.548],
[1991, 1.494],
[1992, 1.224],
[1993, 1.278],
[1994, 1.368],
[1995, 1.584],
[1996, 1.35],
[1997, 1.692],
[1998, 1.908],
[1999, 1.566],
[2000, 1.53],
[2001, 1.746],
[2002, 1.854],
[2003, 1.872],
[2004, 1.8],
[2005, 1.944],
[2006, 1.872],
[2007, 1.872],
[2008, 1.746],
[2009, 1.908],
[2010, 2.034],
[2011, 1.8],
[2012, 1.89],
[2013, 1.962],
[2014, 2.106],
[2015, 2.394]
],
options: {
x: {
0: {
side: 'top'
}
},
height: 313,
width:263,
curveType: 'function',
colors: ['#333'],
legend: {
position: 'none'
},
vAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
},
baselineColor: 'transparent'
},
hAxis: {
format: 'none',
textPosition: 'none',
gridlines: {
color: 'transparent'
}
},
chartArea: {
left: 0,
top: 0,
width: "100%",
height: "100%"
},
backgroundColor: {
fill: 'transparent'
},
enableInteractivity: false
}
};
public areaChart: GoogleChartInterface = {
chartType: 'AreaChart',
dataTable: [
['Year', 'Baseline', 'Coal Power Plants', 'Natural Gas', 'Waste', 'Farming', 'Factories', 'Buildings', 'Houses', 'Ships', 'Planes', 'Cars & Trucks', 'temp'],
['1900', undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, 60.1],
['2015', 56.5, 0.55, 0.30, 0.13, 0.28, 0.28, 0.32, 0.19, 0.04, 0.05, 0.3, 60.1],
['2020', 56.5, 0.59, 0.32, 0.13, 0.3, 0.3, 0.34, 0.2, 0.04, 0.05, 0.33, 60.1],
['2030', 56.5, 0.71, 0.37, 0.15, 0.34, 0.35, 0.41, 0.24, 0.05, 0.05, 0.39, 60.1],
['2040', 56.5, 0.83, 0.43, 0.17, 0.39, 0.42, 0.48, 0.29, 0.06, 0.06, 0.46, 60.1],
['2050', 56.5, 0.98, 0.5, 0.19, 0.45, 0.49, 0.57, 0.34, 0.07, 0.07, 0.54, 60.1],
['2060', 56.5, 1.14, 0.57, 0.21, 0.5, 0.57, 0.66, 0.39, 0.08, 0.09, 0.63, 60.1],
['2070', 56.5, 1.31, 0.63, 0.23, 0.55, 0.66, 0.76, 0.45, 0.09, 0.1, 0.72, 60.1],
['2080', 56.5, 1.47, 0.69, 0.24, 0.59, 0.74, 0.85, 0.51, 0.1, 0.11, 0.81, 60.1],
['2090', 56.5, 1.63, 0.74, 0.25, 0.62, 0.82, 0.94, 0.56, 0.11, 0.12, 0.9, 60.1],
['2100', 56.5, 1.77, 0.79, 0.26, 0.66, 0.89, 1.03, 0.61, 0.12, 0.14, 0.98, 60.1]
],
options: {
isStacked: 'absolute',
height: 690,
width: 1340,
areaOpacity: 0.5,
legend: {
position: 'none'
},
series: {
11: {
type: 'line',
color: '#f23573',
lineDashStyle: [2, 2]
}
},
colors: ['#dcf8fa', '#b720dd', '#f6705a', '#f89b2d', '#fbcb0a', '#91d957', '#46d999', '#3cd6d8', '#60bcfd', '#96a6fb', '#4459c8', '#f23573'],
vAxis: {
minValue: 56.3,
ticks: [57, 58, 59, 60, 61, 62, 63, 64],
format: '##.#',
viewWindowMode: 'explicit',
viewWindow: {
max: 64,
min: 56.3
}
},
hAxis: {
minValue: 1900,
ticks: [1900, 2015, 2020, 2030, 2040, 2050, 2060, 2070, 2080, 2090, 2100],
scaleType: 'linear'
},
chartArea: {
left: 60,
top: 40,
width: "90%",
height: "88%"
},
enableInteractivity: false
}
};
constructor(){
}
}
app.component.html
<div style="width:90%;height:700px;margin-left: 5.5em;margin-right: auto;margin-bottom: 3em;">
<google-chart [data]="areaChart"></google-chart>
</div>
<div id="linechart_container">
<google-chart [data]="lineChart" id="linechart_div"></google-chart>
</div>
app.component.scss
#linechart_container
{
position: absolute;
width: 263px;
height: 620px;
background-color: #DDD;
opacity: 0.8;
top:0px;
padding:0;
left: 156px;
padding-top: 1em;
}
#linechart_div
{
position: absolute;
width: 263px;
/*height:315px;*/
/*top:380px;*/
height: 313px;
top: 382px;
}
Upvotes: 1
Views: 1408
Answers (1)
WhiteHat
Reputation: 61212
in similar fashion as the target line data row,
you could add a couple blank rows (undefined) to the data table to increase the gap.
['1900', undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, 60.1],
[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
['2015', 56.5, 0.55, 0.30, 0.13, 0.28, 0.28, 0.32, 0.19, 0.04, 0.05, 0.3, 60.1],
then set the width of the chart and the background container to fill the gap.
// line chart width
options: {
height: 313,
width: 302,
...
/* background css */
#linechart_container {
position: absolute;
width: 302px;
...
see following working snippet...
(although not angular, works the same)
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var lineChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'linechart_div',
dataTable: google.visualization.arrayToDataTable([
["Year", "Temp"],
[1880, 0.54],
[1881, 0.648],
[1882, 0.648],
[1883, 0.504],
[1884, 0.396],
[1885, 0.36],
[1886, 0.396],
[1887, 0.306],
[1888, 0.486],
[1889, 0.576],
[1890, 0.18],
[1891, 0.324],
[1892, 0.216],
[1893, 0.198],
[1894, 0.27],
[1895, 0.36],
[1896, 0.612],
[1897, 0.558],
[1898, 0.306],
[1899, 0.558],
[1900, 0.648],
[1901, 0.522],
[1902, 0.324],
[1903, 0.162],
[1904, 0.018],
[1905, 0.252],
[1906, 0.396],
[1907, 0.108],
[1908, 0],
[1909, 0.018],
[1910, 0.108],
[1911, 0],
[1912, 0.198],
[1913, 0.216],
[1914, 0.54],
[1915, 0.666],
[1916, 0.27],
[1917, 0.234],
[1918, 0.414],
[1919, 0.414],
[1920, 0.414],
[1921, 0.522],
[1922, 0.378],
[1923, 0.396],
[1924, 0.342],
[1925, 0.522],
[1926, 0.666],
[1927, 0.522],
[1928, 0.468],
[1929, 0.252],
[1930, 0.612],
[1931, 0.648],
[1932, 0.576],
[1933, 0.342],
[1934, 0.594],
[1935, 0.522],
[1936, 0.576],
[1937, 0.738],
[1938, 0.72],
[1939, 0.756],
[1940, 0.936],
[1941, 1.116],
[1942, 1.044],
[1943, 1.044],
[1944, 1.296],
[1945, 1.08],
[1946, 0.756],
[1947, 0.684],
[1948, 0.684],
[1949, 0.666],
[1950, 0.486],
[1951, 0.756],
[1952, 0.81],
[1953, 0.936],
[1954, 0.558],
[1955, 0.522],
[1956, 0.414],
[1957, 0.864],
[1958, 0.972],
[1959, 0.882],
[1960, 0.81],
[1961, 0.9],
[1962, 0.936],
[1963, 0.954],
[1964, 0.504],
[1965, 0.63],
[1966, 0.72],
[1967, 0.738],
[1968, 0.72],
[1969, 0.936],
[1970, 0.828],
[1971, 0.63],
[1972, 0.81],
[1973, 1.062],
[1974, 0.63],
[1975, 0.774],
[1976, 0.63],
[1977, 1.116],
[1978, 0.972],
[1979, 1.17],
[1980, 1.242],
[1981, 1.314],
[1982, 1.098],
[1983, 1.386],
[1984, 1.026],
[1985, 1.008],
[1986, 1.17],
[1987, 1.44],
[1988, 1.44],
[1989, 1.296],
[1990, 1.548],
[1991, 1.494],
[1992, 1.224],
[1993, 1.278],
[1994, 1.368],
[1995, 1.584],
[1996, 1.35],
[1997, 1.692],
[1998, 1.908],
[1999, 1.566],
[2000, 1.53],
[2001, 1.746],
[2002, 1.854],
[2003, 1.872],
[2004, 1.8],
[2005, 1.944],
[2006, 1.872],
[2007, 1.872],
[2008, 1.746],
[2009, 1.908],
[2010, 2.034],
[2011, 1.8],
[2012, 1.89],
[2013, 1.962],
[2014, 2.106],
[2015, 2.394]
]),
options: {
height: 313,
width: 302,
curveType: 'function',
colors: ['#333'],
legend: {
position: 'none'
},
vAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
},
baselineColor: 'transparent'
},
hAxis: {
format: 'none',
textPosition: 'none',
gridlines: {
color: 'transparent'
}
},
chartArea: {
left: 0,
top: 0,
width: '100%',
height: '100%'
},
backgroundColor: {
fill: 'transparent'
},
enableInteractivity: false
}
});
var areaChart = new google.visualization.ChartWrapper({
containerId: 'areachart_div',
chartType: 'AreaChart',
dataTable: google.visualization.arrayToDataTable([
['Year', 'Baseline', 'Coal Power Plants', 'Natural Gas', 'Waste', 'Farming', 'Factories', 'Buildings', 'Houses', 'Ships', 'Planes', 'Cars & Trucks', 'temp'],
['1900', undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, 60.1],
[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
['2015', 56.5, 0.55, 0.30, 0.13, 0.28, 0.28, 0.32, 0.19, 0.04, 0.05, 0.3, 60.1],
['2020', 56.5, 0.59, 0.32, 0.13, 0.3, 0.3, 0.34, 0.2, 0.04, 0.05, 0.33, 60.1],
['2030', 56.5, 0.71, 0.37, 0.15, 0.34, 0.35, 0.41, 0.24, 0.05, 0.05, 0.39, 60.1],
['2040', 56.5, 0.83, 0.43, 0.17, 0.39, 0.42, 0.48, 0.29, 0.06, 0.06, 0.46, 60.1],
['2050', 56.5, 0.98, 0.5, 0.19, 0.45, 0.49, 0.57, 0.34, 0.07, 0.07, 0.54, 60.1],
['2060', 56.5, 1.14, 0.57, 0.21, 0.5, 0.57, 0.66, 0.39, 0.08, 0.09, 0.63, 60.1],
['2070', 56.5, 1.31, 0.63, 0.23, 0.55, 0.66, 0.76, 0.45, 0.09, 0.1, 0.72, 60.1],
['2080', 56.5, 1.47, 0.69, 0.24, 0.59, 0.74, 0.85, 0.51, 0.1, 0.11, 0.81, 60.1],
['2090', 56.5, 1.63, 0.74, 0.25, 0.62, 0.82, 0.94, 0.56, 0.11, 0.12, 0.9, 60.1],
['2100', 56.5, 1.77, 0.79, 0.26, 0.66, 0.89, 1.03, 0.61, 0.12, 0.14, 0.98, 60.1]
]),
options: {
isStacked: 'absolute',
height: 690,
width: 1340,
areaOpacity: 0.5,
legend: {
position: 'none'
},
series: {
11: {
type: 'line',
color: '#f23573',
lineDashStyle: [2, 2]
}
},
colors: ['#dcf8fa', '#b720dd', '#f6705a', '#f89b2d', '#fbcb0a', '#91d957', '#46d999', '#3cd6d8', '#60bcfd', '#96a6fb', '#4459c8', '#f23573'],
vAxis: {
minValue: 56.3,
ticks: [57, 58, 59, 60, 61, 62, 63, 64],
format: '##.#',
viewWindowMode: 'explicit',
viewWindow: {
max: 64,
min: 56.3
}
},
chartArea: {
left: 60,
top: 40,
width: '90%',
height: '88%'
},
enableInteractivity: false
}
});
lineChart.draw();
areaChart.draw();
});#areachart_container {
width: 90%;
height: 700px;
margin-left: 5.5em;
margin-right: auto;
margin-bottom: 3em;
}
#linechart_container {
position: absolute;
width: 302px;
height: 620px;
background-color: #DDD;
opacity: 0.8;
top:0px;
padding:0;
left: 156px;
padding-top: 1em;
}
#linechart_div {
position: absolute;
width: 263px;
/*height:315px;*/
/*top:380px;*/
height: 313px;
top: 382px;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="areachart_container">
<div id="areachart_div"></div>
</div>
<div id="linechart_container">
<div id="linechart_div"></div>
</div>notes:
1) the following options you had on the hAxis,
have no effect on a discrete axis (string values --> '1900', '2015', ...),
and are only valid on a continuous axis (number, date, etc... --> 1900, 2015)
see discrete vs continuous axis
minValue: 1900,
ticks: [1900, 2015, 2020, 2030, 2040, 2050, 2060, 2070, 2080, 2090, 2100],
scaleType: 'linear'
2) recommend using css rather than the style attribute (on the area chart container)
see above snippet...
Upvotes: 1
Related Questions
- ng2 charts bar chart need spacing between 2 bars in series Angular
- How to increase space between label and chart area?
- how to increase space between legend and chart in chartjs (ng2charts ) using angular
- How to add space between datasets in ng2 doughnut chart
- ng2-charts: extra margin on axis
- Ng2-charts + How to customize the position of X axis labels?
- space before and after data points in chart.js
- Chart.js, increase space between bars and its labels when increasing the charts width
- Google chart: increase margin between x axis labels and x-axis
- decrease bar spacing chartJS v2