Settings You Might Want to Know About Highcharts
Recently, I have come into contact with Highcharts, and I have consulted a lot of information in order to achieve the desired effect. Let’s take a chestnut. In this chestnut, you can set the display size of the chart, the position of the label, the background transparency of the data label, the size of the label border, the size of the label, the font size of the label, the transparent label, the display and hide, the label value formatting, and the color. Put the code below:
var chart2 = {
tooltip: {
borderColor: '#000000'
},
chart: {
type: 'column',
animation: false,
height: 250, //Control the size of the graph
width:280,
backgroundColor: 'rgba(0,0,0,0)'
},
title: {
text: null
},
subtitle: {
text: 'Unit: MB',
align: 'right',
floating: true,
verticalAlign: "top", //Control position
x: 0
},
xAxis: A
},
yAxis: {
title: {
text: null
},
visible: false,
},
plotOptions: {
column: {
dataLabels: {
enabled: true, // enable data tag
color: "333333",
crop: false
},
pointWidth: 10,
enableMouseTracking: false // Disable mouse tracking, the corresponding prompt box and click event will be invalid
},
// tooltip : {
// pointFormat : ' <b>{point.y:.2f}</b>'
// },
series: {
events: {
legendItemClick: function(mmm) {
for (var i = 0; i < chart2.series.length; i++) {
chart2.series[i].hide();
}
var visibility = this.visible ? 'visible' : 'hidden';
}
},
dataLabels: {
enabled: true,
verticalAlign: "middle",
align: "center",
borderRadius: 0,
backgroundColor: 'rgba(0, 0, 0, 0)', //set the label background transparent
borderWidth: 0, // label border size
color: "#666",
borderColor: '#5799d4',
and: -25,
borderHeight: 0,
shadow: false,
format : '{point.y:.2f}', //retain two digits after the decimal point, and also display 0 after the decimal point
style: {
weight:'10px', //label box size
height:'4px',
left:0,
padding:0,
visibility:'visible', //visible
opacity:'1', //transparency
fontWeight:'8px', //label font size
fontHeight:'4px',
fontSize: '3px'
}
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'nearly half a year'
}]
};
Realize the effect diagram:
