Creating charts with Vue using JSON data passed into the :options tag has been my usual approach.
However, I am now experimenting with constructing a custom chart by utilizing the renderer and ren.path().attr().add() functions. The load function within the chart options prevents me from converting this setup into a JSON file.
THE CUSTOM CHART SETUP:
{
chart: {
backgroundColor: 'white',
width: 600,
height: 200,
borderWidth: 1,
events: {
load: function () {
var ren = this.renderer,
colors = Highcharts.getOptions().colors,
rightArrow = ['M', 0, 0, 'L', 10, 0, 'L', 5, 5, 'M', 10, 0, 'L', 5, -5];
ren.path(['M', 50, 100, 'L', 550, 100])
.attr({
'stroke-width': 3,
stroke: 'black',
dashstyle: 'solid'
})
.add();
ren.text('0%', 50 , 150).add();
ren.text('Peer Group 1', 50, 50).add();
ren.text('20%', 150 , 150).add();
ren.text('Peer Group 2', 150, 50).add();
ren.text('40%', 250 , 150).add();
ren.text('Peer Group 3', 250, 50).add();
ren.text('60%', 350 , 150).add();
ren.text('Peer Group 4', 350, 50).add();
ren.text('80%', 450 , 150).add();
ren.text('Peer Group 5', 450, 50).add();
ren.text('100%', 550 , 150).add();
ren.path(['M', 100, 80, 'L', 100, 120])
.attr({'stroke-width': 3,stroke: 'black',dashstyle: 'solid'}).add();
ren.path(['M', 200, 80, 'L', 200, 120])
.attr({'stroke-width': 3,stroke: 'black',dashstyle: 'solid'}).add();
ren.path(['M', 300, 80, 'L', 300, 120])
.attr({'stroke-width': 3,stroke: 'black',dashstyle: 'solid'}).add();
ren.path(['M', 400, 80, 'L', 400, 120])
.attr({'stroke-width': 3,stroke: 'black',dashstyle: 'solid'}).add();
ren.path(['M', 500, 80, 'L', 500, 120])
.attr({'stroke-width': 3,stroke: 'black',dashstyle: 'solid'}).add();
ren.circle(150, 100, 9).attr({fill: '#0000FF',
stroke: 'black','stroke-width': 0}).add();
ren.text('20%', 140, 70).css({color: '#0000FF'}) .add();
}
}
},
title: {
text: 'Highcharts export server overview',
style: {
color: 'black'
}
}
}
You can view the working JSON structure in this link. I typically follow this format for loading JSON data into the tags as shown above.
Am I overlooking something? Is there an alternative method to import this type of data into Highcharts or convert it into JSON format?