eCharts (v3) has captured my attention and am impressed. Lets create a gauge chart and also understand the code.
Note: CDN for english version of echarts version 3 can be found here :
https://cdnjs.com/libraries/echarts
HTML:
<!doctype html> <html> <head> <title>Charts Gauge Example</title> </head> <body> <div id="chart" style="width: 100vw; height: 100vh;"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts-en.min.js"></script> <script src="app.js"></script> </body> </html>
The js code (app.js):
var mychart = document.getElementById('chart');
gChart = echarts.init(mychart);
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show : true,
feature : {
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
title:{
show:true,
offsetCenter:[0,-230],
color:'#888',
fontWeight:'bold',
fontSize:24
},
clockwise:true,
startAngle:180,
endAngle:0,
pointer:{show:true},
axisTick:{show:true},
splitLine:{show:false},
name:'Business Indicators',
type:'gauge',
detail : {
offsetCenter:[5,-40],
formatter:'{value}%'
},
data:[{value: 75, name: 'Rate'}]
}]
};
//Add this to have the data changed every two seconds
setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
gChart.setOption(option, true);
},2000);
- Here first we are setting variable “mychart” to DOM element with ID = “chart”
- At line 2 of the JS we initialize an echart at the DOM ID (“chart”)
- Now we set the options which will be passed to the initialized echart to render on screen
Decoding the “options”:
- In the example , options has the following attributes
- series
- tooltip
- toolbox
Series:
Here we define the
- name of chart – ‘Business Indicators’ in the example
- type of chart – ‘Gauge’
- Title (“Rate” in this example) takes its value from data.name and the styling is driven by series.title properties
- startAngle is 180 and endAngle is 0 (see pic) when property clockwise is set to true (default)
- series.data.value is displayed with style and positioning defined by series.details
- pointer and axis ticks have visbility set to true.
Tooltip:
- Here we define the content to be seen when hovering over the pointer.
- In line 33 of JS code ,
- {a} represents name of the chart, defined in property series.name (“Businesss Indicators”)
- {b} represents data.name
- {c} represents data.value
Note : There are more options to customize ( described in API documentation of echarts)
Tool Box:
- Here two features are defined to be visible -> Restore and Download as Image.
- There are other options that can be configured
Heres the output:
Just by changing the startAngle and/or endAngle you can change the shape of the dial.
Ex, set startAngle to 225 and endAngle to -45 and here’s what you get:
How to remove decimal values gauge charts?
How to change color gauge?
Apologies for the late response as I haven’t been monitoring this anymore.
You can change the gauge color by adding axisLine object to the object inside the series array, as shown below
series : [
{
title:{
show:true,
offsetCenter:[0,-230],
color:'#888',
fontWeight:'bold',
fontSize:24
},
clockwise:true,
startAngle:180,
endAngle:0,
pointer:{show:true},
axisTick:{show:true},
splitLine:{show:false},
name:'Business Indicators',
type:'gauge',
detail : {
offsetCenter:[5,-40],
formatter:'{value}%'
},
axisLine: {
lineStyle: {
color: [
[0.29, 'lime'],
[0.86, 'yellow'],
[1, 'orange']
],
width: 2
}
},
data:[{value: 75, name: 'Rate'}]
}]
Hi is it possible to show negative values in the gauge chart?.
Hello, what about changing the needle/pointer color? There doesn’t seem to be an option? It only uses the color of the gauge area it is pointing at.
That is correct! The pointer takes the color of the area its pointing to.