I am using echarts library for bar charts. I want scrollbar to display outside the canvas. Is there any way I can accomplish this?
Unfortunately, Echarts don't support scrollbar option.
However you can simply achieve this use a wrap DOM.
check this demo:
let echartsObj = echarts.init(document.querySelector('#canvas1'));
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
echartsObj.setOption(option)
echartsObj = echarts.init(document.querySelector('#canvas2'));
option = {
xAxis: {},
yAxis: {},
series: [{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
type: 'scatter'
}]
};
echartsObj.setOption(option)
.echart-wrap {
display: inline-block;
width: 300px;
height: 300px;
overflow: scroll;
border: 1px solid black;
}
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div class="echart-wrap">
<div id="canvas1" style="width: 500px; height: 500px">
</div>
</div>
<div class="echart-wrap">
<div id="canvas2" style="width: 500px; height: 500px">
</div>
</div>
</body>
</html>
Related
In Apache Echarts, is there a way to rotate the title text of a chart so that it is vertically oriented on one side rather than horizontal on the top? The title at the top sometimes takes important chart real-estate that my series in some cases can overlap. I would like to instruct Echarts when there's a space crunch to move the title off to the left side in a vertical position (like reading titles on the spines of books in a library). There appears to be several "rotate" options for labels, but nothing for titles.
I am not sure you can rotate the main title if you use the default canvas renderer. In this case, you may want to play with the name of your yAxis like this:
const myChart = echarts.init(document.getElementById('main'));
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
name: 'This is my title',
nameLocation: 'center',
nameRotate: 90,
nameGap: 45,
nameTextStyle: {
color: 'black',
fontSize: 18,
fontWeight: 'bold'
}
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
myChart.setOption(option);
#main {
width: 100%;
height: 350px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
Alternatively, you could use the SVG renderer and add a bit of CSS to transform the main title (which is a <text> element):
const myChart = echarts.init(document.getElementById('main'), null, { renderer: 'svg' });
let option = {
title: {
text: 'This is my title'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
myChart.setOption(option);
#main {
width: 100%;
height: 350px;
}
svg g text:last-child {
transform: rotate(-90deg) translateX(-250px);
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
Hej,
I know this has been answered in one way or the other many times, but I really can't get it work in my context with flex-boxes.
I have fixed elements, such as headers and footers on my page, and a chart that shall take up all the remaining space in between. While it appears to be working on first glance, you can see that the text and numbers are blurred and not properly scaled when the window is resized.
How can I fix this, or have chart.js redraw the canvas upon resize?
Check out my fiddle
https://jsfiddle.net/fg9pd1b3/
<body>
<div class="container">
<div class="fixed">
header
</div>
<div id="chartcontainer">
<canvas id="chartJSContainer"></canvas>
</div>
<div class="fixed">
footer
</div>
</div>
</body>
CSS:
html,
body {
height: 100vh;
min-height: 100vh;
max-height: 100vh;
margin: 0;
padding: 0;
}
.container {
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex-grow: 1;
background: #CCC;
}
.p {
text-align: center;
font-size: 14px;
padding-top: 140px;
}
.fixed {
background: black;
height: 100px;
min-height: 100px;
color: white;
text-align: center;
}
#chartcontainer {
position: relative;
min-height: 200px;
display: flex;
flex-grow: 1;
}
canvas {
width: 100% !important;
height: 100% !important;
}
JS:
Chart.defaults.global.responsive = true;
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
You have given fixed min-height to the canvas div which restricts the chart to further change it's dimensions. So, the following code has auto height and width automates to 100% which gives flexible chart.
#chartcontainer {
position:relative;
min-height:auto;
width:100%;
display: flex;
flex-grow:1;
}
I have trouble aligning/justifying as centered buttons in the AppBar.
It looks like this (see demo here):
<AppBar position='sticky'>
<Toolbar>
<div className={classes.topMenuBoxes}>
<img className={classes.logoSize} src={LogoFull} alt="logo" ></img>
</div>
<div className={classes.topMenuBoxes}>
<Button className={classes.menuText} color='inherit' >Offer</Button>
<Button className={classes.menuText} color='inherit' >Join</Button>
<Button className={classes.menuText} color='inherit' component={AboutLink}>About us</Button>
</div>
<div className={classes.topMenuBoxes}>
<DropMenu />
</div>
</Toolbar>
</AppBar>
...and using this makeStyles:
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
logoSize: {
marginTop: '30px',
height: '70px',
},
menuButton: {
[theme.breakpoints.up('md')]: {
display: 'none',
},
marginRight: theme.spacing(2),
},
menuText: {
[theme.breakpoints.down('sm')]: {
display: "none",
},
textTransform: 'none',
},
topMenuBoxes: {
flex: 1,
},
}));
How do I align content inside the divs where I have referenced classes.topMenuBoxes?
Thanks!
Add textAlign:"center" to your topMenuBoxes:
const useStyles = makeStyles(theme => ({
// ...
topMenuBoxes: {
flex: 1,
textAlign: "center"
}
}));
I have a line chart with a rather large set of items in it and I was wondering if there was a way to trigger the tooltip without having symbols on the lines.
I tried using both triggers (axis,item) but no luck.
It looks a bit weird when symbols (i.e. circles) are displayed which is why I want to hide them.
Has anyone had any similar issues?
Thanks
How about set series.symbolSize to 0 and 'axis' as trigger like below, is this you want?
let echartsObj = echarts.init(document.querySelector('#canvas'));
option = {
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
symbolSize: 0
}]
};
echartsObj.setOption(option)
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 100%; height: 300px">
</div>
</body>
</html>
I want to create chart like that in highcharts:
IOT Central Chart
this is what i get until now:
Highcharts.setOptions({
colors: ['#3399CF', '#F9BA06', '#65AF35', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
// Get the data. The contents of the data file can be viewed at
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/activity.json',
function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data.splice(1, 10), function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
type: "spline",
marginLeft: 40, // Keep all charts left aligned
marginTop: 7,
marginBottom: 7
},
title: {
text: null,
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
visible: false,
labels: {
format: '{value} km'
}
},
yAxis: {
visible: true,
title: {
text: null
},
tickAmount: 2,
minPadding: 0,
lineWidth:1,
gridLineColor: "transparent"
},
series: [{
data: dataset.data,
name: dataset.name,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
}
);
.chart {
min-width: 320px;
max-width: 800px;
height: 150px;
margin: 0 auto;
}
<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>
<div id="container"></div>
but the problem is that i cant export or zoom do normal legend to this chart.
The problem here is that you create three separate charts instead of one.
Highstock allows you to position and resize axes (height & top properties):
yAxis: [{
height: '50%'
}, {
top: '50%',
height: '50%'
}],
API references:
https://api.highcharts.com/highstock/yAxis.height
https://api.highcharts.com/highstock/yAxis.top
In fact it's going to work in Highcharts too (even though it's not documented).
Live demo: http://jsfiddle.net/BlackLabel/gb3jhq75/