I'm using Highcharts to generate dynamic charts.
I have a monthly data comparison, however, I would like to know if it is possible to keep only one subtitle name.
To understand better I'm putting down my code.
You may notice that the legend has two names "Fumularios", this is due to the comparison I am doing, however, visually I would like it to display only one name, the second is not necessary to show, because the colors already indicate the information of the data.
chart = new Highcharts.Chart({
"chart": {
"renderTo": "container_5c6d32c33fee6",
"type": "column"
},
"title": {
"text": "Total por Capta\u00e7\u00f5es - Convers\u00f5es (Formul\u00e1rio|Chatbot|Whatsapp)"
},
"colors": ["#65c07f", "#1d6c3f", "#f79969", "#e46a2b", "#fdc076", "#e4452b", "#004b76", "#003f23", "#b6740c", "#005a64", "#1b964e", "#83ccb0", "#24a1ae", "#ec9631", "#147bb6", "#ff7754", "#007b5a", "#6ecbd6", "#ba0d00", "#68a9dc"],
"xAxis": {
"categories": ["Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez", "Jan \u21e9-64.78%"]
},
"yAxis": {
"title": {
"text": "Quantidade"
},
"maxPadding": 0.01,
"stackLabels": {
"enabled": 1,
"style": {
"fontWeight": "bold",
"fontSize": "14px",
"color": "#000"
}
}
},
"legend": {
"align": "center",
"verticalAlign": "bottom",
"backgroundColor": (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
"borderColor": "#CCC",
"borderWidth": 1,
"shadow": false
},
"tooltip": {
"formatter": function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
"plotOptions": {
"column": {
"stacking": "normal",
"dataLabels": {
"enabled": 1,
"crop": 0,
"style": {
"fontSize": "14px"
},
"overflow": "justify",
"color": (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
"series": [{
"name": "Formul\u00e1rio",
"data": [1391, 1573, 1943, 1816, 1393, 2213, 2311, 1722, 1822, 1691, 1505, 1878],
"color": "#1d6c3f",
"stack": "A"
}, {
"name": "Formul\u00e1rio",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579],
"color": "#1d6c3f",
"stack": "B"
}, {
"name": "Chatbot",
"data": [628, 498, 689, 512, 511, 505, 501, 510, 623, 699, 665, 669],
"color": "#68a9dc",
"stack": "A"
}, {
"name": "Chatbot",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 285],
"color": "#68a9dc",
"stack": "B"
}, {
"name": "Whatsapp",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 9, 90, 96, 0],
"color": "#65c07f",
"stack": "A"
}, {
"name": "Whatsapp",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 33],
"color": "#65c07f",
"stack": "B"
}]
});
You can achieve it by setting series.column.showInLegend = false on duplicated series. Check demo and code posted below.
Code:
chart = new Highcharts.Chart({
"chart": {
"renderTo": "container",
"type": "column"
},
"title": {
"text": "Total por Capta\u00e7\u00f5es - Convers\u00f5es (Formul\u00e1rio|Chatbot|Whatsapp)"
},
"colors": ["#65c07f", "#1d6c3f", "#f79969", "#e46a2b", "#fdc076", "#e4452b", "#004b76", "#003f23", "#b6740c", "#005a64", "#1b964e", "#83ccb0", "#24a1ae", "#ec9631", "#147bb6", "#ff7754", "#007b5a", "#6ecbd6", "#ba0d00", "#68a9dc"],
"xAxis": {
"categories": ["Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez", "Jan \u21e9-64.78%"]
},
"yAxis": {
"title": {
"text": "Quantidade"
},
"maxPadding": 0.01,
"stackLabels": {
"enabled": 1,
"style": {
"fontWeight": "bold",
"fontSize": "14px",
"color": "#000"
}
}
},
"legend": {
"align": "center",
"verticalAlign": "bottom",
"backgroundColor": (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
"borderColor": "#CCC",
"borderWidth": 1,
"shadow": false
},
"tooltip": {
"formatter": function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
"plotOptions": {
"column": {
"stacking": "normal",
"dataLabels": {
"enabled": 1,
"crop": 0,
"style": {
"fontSize": "14px"
},
"overflow": "justify",
"color": (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
"series": [{
"name": "Formul\u00e1rio",
"data": [1391, 1573, 1943, 1816, 1393, 2213, 2311, 1722, 1822, 1691, 1505, 1878],
"color": "#1d6c3f",
"stack": "A"
}, {
"name": "Formul\u00e1rio",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579],
"color": "#1d6c3f",
showInLegend: false,
"stack": "B"
}, {
"name": "Chatbot",
"data": [628, 498, 689, 512, 511, 505, 501, 510, 623, 699, 665, 669],
"color": "#68a9dc",
"stack": "A"
}, {
"name": "Chatbot",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 285],
"color": "#68a9dc",
showInLegend: false,
"stack": "B"
}, {
"name": "Whatsapp",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 9, 90, 96, 0],
"color": "#65c07f",
"stack": "A"
}, {
"name": "Whatsapp",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 33],
"color": "#65c07f",
showInLegend: false,
"stack": "B"
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Demo:
https://jsfiddle.net/BlackLabel/xfadnovy/1/
API reference:
https://api.highcharts.com/highcharts/series.column.showInLegend
Related
I am using a combination of stack bar and line chart at the same with the help of HighChart, I want to be able to select a bar(or in my case the entire stack bar as well as the point in the line graph) and change its color when I click on it,
Right now I am able to select a bar and change its color but not able to change the color of both bars and the point of the line which was clicked
Below is the click of the code which I tried from my end, I want to be able to select the entire bar and line when clicked, but I am only able to select one of them
SandBox Link
I tried this sorry that the sandbox link was broken
Highcharts.chart('container', {
"chart": {
"zoomType": "xy",
"height": 320
},
"credits": {
"enabled": false
},
"title": {
"text": "",
"align": "left",
"style": {
"fontFamily": "Poppins, Helvetica, \"sans-serif\"",
"fontWeight": "600"
}
},
"xAxis": {
"title": {
"text": ""
},
"categories": [
"0.01-0.05",
"0.06-0.10",
"0.11-0.15",
"0.16-0.20",
"0.21-0.25",
"0.26-0.30",
"0.31-0.35",
"0.36-0.40",
"0.41-0.45",
"0.46-0.50",
"0.51-0.55",
"0.56-0.60",
"0.61-0.65",
"0.66-0.70",
"0.71-0.75",
"0.76-0.80",
"0.81-0.85",
"0.86-0.90",
"0.91-0.95",
"0.96-1.00"
],
"crosshair": true,
"plotLines": [{
"color": "#A9A9A9",
"width": 3,
"value": 9.5,
"dashStyle": "longdashdot"
}]
},
"yAxis": [{
"title": {
"text": "Count"
},
"min": 0
},
{
"title": {
"text": "y1 count"
},
"opposite": true,
"min": 0
}
],
"tooltip": {
"shared": true
},
plotOptions: {
series: {
stacking: 'normal',
point: {
events: {
click() {
var indexP = this.x,
series = this.series.chart.series;
if (series[0].data[indexP].selected) {
//unselect
series[0].data[indexP].select(false, true);
series[1].data[indexP].select(false, true);
} else {
var i = 0;
var len = series[1].data.length;
for (i = 0; i < len; i++) { //clear all selection
series[0].data[i].select(false, true);
series[1].data[i].select(false, true);
series[2].data[i].select(false, true);
}
//select
series[0].data[indexP].select(true, true);
series[1].data[indexP].select(true, true);
series[2].data[indexP].select(true, true);
}
return false;
}
}
}
}
},
"legend": {
"layout": "horizontal",
"align": "right",
"verticalAlign": "top"
},
"exporting": {
"enabled": false
},
"series": [{
"name": "y1",
"type": "column",
"stack": 1,
"yAxis": 1,
"color": "rgb(217, 141, 39)",
"data": [
1,
13,
24,
25,
34,
74,
104,
66,
104,
121,
111,
89,
87,
97,
93,
92,
100,
147,
250,
567
],
"tooltip": {
"valueSuffix": " "
}
},
{
"name": "y3",
"type": "column",
"stack": 1,
"yAxis": 1,
"color": "rgb(44, 99, 143)",
"data": [
463,
287,
208,
201,
209,
197,
171,
150,
134,
102,
65,
50,
36,
24,
33,
20,
13,
13,
10,
9
],
"tooltip": {
"valueSuffix": ""
}
},
{
"name": "y3",
"type": "line",
"color": "#F1416C",
"data": [
1,
14,
38,
63,
97,
171,
275,
341,
445,
566,
677,
766,
853,
950,
1043,
1135,
1235,
1382,
1632,
2199
],
"tooltip": {
"valueSuffix": " "
}
}
]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>
Wanting to use ChartJS to generate a complex combination graph. All working well with the exception of being able to control the formatting of the legend.
Trying to achieve something like this:
desired chart display
The code I have for this is below. Have tried using the generateLabels function to override but with no success. I'd settle for being able to set the background color of the boxes in the legend to be clear so that the dashed lines are more obvious.
# quickchart-python https://github.com/typpo/quickchart-python
from quickchart import QuickChart
qc = QuickChart()
qc.width = 600
qc.height = 400
# Config can be set as a string or as a nested dict
qc.config = """{
"type": "line",
"data": {
"labels": [
"2015-16",
"2016-17",
"2017-18",
"2018-19",
"2019-20",
"2020-21",
"2021-22",
"2022-23",
"2023-24",
"2024-25",
"2025-26",
"2026-27",
"2027-28",
"2028-29",
"2029-30",
"2030-31",
"2031-32",
"2032-33",
"2033-34",
"2034-35",
"2035-36",
"2036-37",
"2037-38",
"2038-39",
"2039-40",
"2040-41",
"2041-42",
"2042-43",
"2043-44",
"2044-45",
"2045-46",
"2046-47",
"2047-48",
"2048-49"
],
"datasets": [
{
"label": "Emissions (actual)",
"borderColor": "rgb(192,0,0)",
"backgroundColor": "rgb(192,0,0)",
"pointBorderWidth": 0,
"pointBackgroundColor": "rgb(192,0,0)",
"pointStyle":"line",
"pointRadius": 0,
"fill": false,
"data": [
2250,2230,2195,2185,2170,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
],
"yAxisID": "y"
},
{
"label": "Emissions (projected)",
"borderColor": "rgb(192,0,0)",
"borderDash": [4,4],
"backgroundColor": "rgb(0,0,0)",
"pointBorderWidth": 0,
"pointBackgroundColor": "rgb(192,0,0)",
"pointStyle":"line",
"pointRadius": 0,
"fill": false,
"data": [
,,,,2170,2170,2170,2170,2170,2190,2200,2210,2210,2210,2210,2210,2210,2210,
2210,2210,2210,2210,2210,2210,2210,2210,2210,2210,2210,2210,2210,2210,2210,2210
],
"yAxisID": "y"
},
{
"label": "Sequestration (estimated)",
"borderColor": "rgb(0,112,192)",
"backgroundColor": "rgb(0,112,192)",
"pointBorderWidth": 2 ,
"pointBackgroundColor": "rgb(0,112,192)",
"pointStyle":"line",
"pointRadius": 0,
"fill": false,
"data": [
3197,3159,3121,3083,3008,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
],
"yAxisID": "y"
},
{
"label": "Sequestration (projected)",
"borderColor": "rgb(0,112,192)",
"borderDash": [4,4],
"backgroundColor": "rgb(0,112,192)",
"pointBorderWidth": 2,
"pointBackgroundColor": "rgba(0,112,192,0.1)",
"pointStyle":"line",
"pointRadius": 0,
"fill": false,
"data": [
,,,,3008,2970,2932,2894,2856,2818,2780,2742,2704,2666,2628,2590,2552,
2514,2476,2438,2400,2362,2324,2286,2248,2210,2172,2134,2096,2058,2020,
1982,1944,1906
],
"yAxisID": "y"
},
{
"label": "Cumulative balance (actual)",
"borderColor": "rgb(112,173,71)",
"backgroundColor": "rgb(112,173,71)",
"pointBorderWidth": 0,
"pointBackgroundColor": "rgb(112,173,71)",
"pointStyle":"line",
"pointRadius": 0,
"fill": true,
"data": [
947,1876,2802,3700,4538,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
],
"yAxisID": "y1"
},
{
"label": "Cumulative balance (projected)",
"borderColor": "rgba(112,173,71,0.4)",
"backgroundColor": "rgba(112,173,71,0.6)",
"pointBorderWidth": 0,
"pointBackgroundColor": "rgba(112,173,71,0.6)",
"pointStyle":"line",
"pointRadius": 0,
"fill": true,
"data": [
,,,,4538,5338,6100,6824,7510,8138,8718,9250,9744,10200,10618,10998,11340,11644,
11910,12138,12328,12480,12594,12670,12708,12708,12670,12594,12480,12328,12138,
11910,11644,11340
],
"yAxisID": "y1"
}
]
},
"options": {
"stacked": false,
"legend" : {
display: true,
position: 'bottom',
generateLabels(chart) {
return {
fillStyle: "rgb(255,255,255)"
}
}
},
"title": {
"display": false,
"text": "Chart.js Line Chart - Multi Axis"
},
"scales": {
"xAxes":[{
"ticks": {"fontFamily": "Calibri",
"fontSize": 9}
}],
"yAxes": [
{
"id": "y",
"type": "linear",
"display": true,
"position": "left",
"ticks": {
"min": 1000,
"max": 3500,
"stepSize": 500,
"fontFamily": "Calibri",
"fontSize": 9
},
"scaleLabel": {
"display": true,
"labelString": "Emissions and Sequestration - tCO2e per year",
"fontFamily": "Calibri",
"fontSize": 11
}
},
{
"id": "y1",
"type": "linear",
"display": true,
"position": "right",
"gridLines": {
"drawOnChartArea": false
},
"ticks": {
"min": 0,
"max": 14000,
"stepSize": 2000,
"fontFamily": "Calibri",
"fontSize": 9
},
"scaleLabel": {
"display": true,
"labelString": "Cumulative carbon balance - tCO2e",
"fontFamily": "Calibri",
"fontSize": 11
}
}
]
}
}
}"""
# You can get the chart URL...
print(qc.get_url())
# Get the image as a variable...
image = qc.get_image()
# Or write the chart to a file
qc.to_file('mychart.png')
This is because you putted the generateLabels function in the root of the legend options while it needs to be nested within the labels key like so:
options: {
legend: {
labels: {
generateLabels: (chart) => {
// Implementation
}
}
}
}
Documentation: https://www.chartjs.org/docs/2.9.4/configuration/legend.html#legend-label-configuration
I have a problem with using headings on the top of the columns using the bar chart.
In some moments shows the title, and other moment does not show ...
Here my Print!
chart = new Highcharts.Chart({
"chart": {
"renderTo": "container_adwords",
"type": "column",
"animation": false
},
"title": {
"text": "Formul\u00e1rio | Chatbot | Whatsapp)"
},
"colors": ["#1d6c3f", "#003f23", "#68a9dc", "#007b5a", "#e4452b", "#ba0d00", "#004b76", "#b6740c", "#1b964e", "#f79969", "#fdc076", "#24a1ae", "#e46a2b", "#ff7754", "#83ccb0", "#6ecbd6", "#ec9631", "#65c07f", "#147bb6", "#005a64"],
"series": [{
"name": "2018",
"data": [575, 360.818182, 194.285714, 410.1, 212, 161.92, 344.846154, 203.639, 824.268, 130.406333, 323.399231, 657.198889]
}, {
"name": "2019",
"data": [1236.88, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}],
"xAxis": {
"categories": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
"labels": {
"style": {
"fontSize": "15px"
}
}
},
"yAxis": {
"min": 0,
"title": {
"text": "Quantidade"
}
},
"legend": {
"align": "center",
"verticalAlign": "bottom"
},
"tooltip": {
"formatter": function() {
return '' + this.x + ': R$ ' + this.y.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
},
"plotOptions": {
"column": {
"dataLabels": {
"enabled": true,
"crop": true,
"overflow": "none",
"style": {
"fontSize": "14px"
},
"formatter": function() {
return 'R$ ' + this.y.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
}
}
}
});
I looked in the Highcharts documentation, but I could not identify anything that could help me on this subject.
Change dataLabels.overflow to "justify".
"plotOptions": {
"column": {
"dataLabels": {
"color": "black",
"enabled": true,
"crop": false,
"overflow": "justify",
"style": {
"fontSize": "14px"
},
"formatter": function() {
return 'R$ ' + this.y.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
}
}
}
https://jsfiddle.net/vdLtw9as/
(I also changed the color, because I don't like it when is does the contrast thing)
When there is only one item in a bar graph the bar isn't centered:
https://codepen.io/anon/pen/rKmrpX?editors=1010
HTML:
<canvas id="myChart" width="400" height="400"></canvas>
JS:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
"labels": ["2018-06-01T04:00:00.000Z"],
"datasets": [{
"type": "bar",
"label": "Earnings",
"yAxisID": "left-y-axis",
"borderColor": "rgba(107, 165, 57, 1)",
"backgroundColor": "rgba(107, 165, 57, 0.4)",
"data": [25.77]
}, {
"type": "line",
"label": "Pageviews",
"yAxisID": "right-y-axis",
"backgroundColor": "rgba(70, 152, 203, 0.4)",
"borderColor": "rgba(70, 152, 203, 1)",
"pointBackgroundColor": "rgba(70, 152, 203, 1)",
"pointRadius": 0,
"data": [3426]
}]
},
options: {
"scales": {
"xAxes": [{
"maxBarThickness": 100,
"type": "time",
"offset": true,
"time": {
"unit": "day",
"tooltipFormat": "MMM-D",
"displayFormats": {
"day": "MMM-D",
"month": "MMM"
}
},
"ticks": {
"maxRotation": 0,
"maxTicksLimit": 7,
"autoSkip": true
},
"gridLines": {
"display": false,
"offsetGridLines": true
}
}],
"yAxes": [{
"id": "left-y-axis",
"type": "linear",
"position": "left",
"ticks": {
"beginAtZero": true
},
"scaleLabel": {
"display": true,
"labelString": "Earnings"
}
}, {
"id": "right-y-axis",
"type": "linear",
"position": "right",
"ticks": {
"beginAtZero": true
},
"gridLines": false,
"scaleLabel": {
"display": true,
"labelString": "Pageviews"
}
}]
},
"tooltips": {
"callbacks": {}
}
}
});
Is there a fix for this? Perhaps I'm missing an option that should be passed in?
Using the latest version of Chart.js (2.7.2) here.
Removing most of the xAxes config seams to give the result you are looking for
https://codepen.io/tryggvigy/pen/rKmQpX?editors=1010
"scales": {
"xAxes": [{
"maxBarThickness": 100,
}],
I am trying to return a highchart using AJAX from python bottle web service.
The code for the web service:
app.get('/getmyname/<jsonstring>')
def getmyname(db, jsonstring):
ret = """{
"chart": {
"type": "column"
},
"colors": [
"#00B7DE"
"#00539E"
],
"title": {
"text": "SALES - VOLUME"
},
"xAxis": {
"categories": [w,w,w,w,w,w,w,w,w,w,w,w,w,w],
"tickLength": "0"
},
"yAxis": {
"gridLineWidth": 0,
"minorGridLineWidth": 0,
"min": 0,
"title": {
"text": "K UNITS"
},
"labels": {
"enabled": false
},
"stackLabels": {
"enabled": true,
"style": {
"fontWeight": "bold",
"color": "(Highcharts.theme && Highcharts.theme.textColor) || 'gray'"
}
}
},
"credits": {
"enabled": false
},
"legend": {
"align": "right",
"x": "-30",
"verticalAlign": "top",
"y": "25",
"floating": true,
"backgroundColor": "(Highcharts.theme && Highcharts.theme.background2) || 'white'",
"borderColor": "#CCC",
"borderWidth": "1",
"shadow": true,
},
"tooltip": {
"formatter": function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
"plotOptions": {
"column": {
"stacking": "normal",
"dataLabels": {
"enabled": true,
"color": "(Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'",
"style": {
"textShadow": "0 0 3px black"
}
}
}
},
"series": [{
"name": "EST",
"data": [1, 4, 2, 6, 5, 8, 3, 6, 1, 2, 8, 3, 4],
}, {
"name": "VOD",
"data": [1, 4, 2, 6, 5, 8, 3, 6, 1, 2, 8, 3, 4]
}]
}""";
return json.dumps(ret)
Ajax Call:
$.ajax({
type: "GET",
url: "http://localhost:8080/getmyname/Query",
data: JSON.stringify(output),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
alert(data) ;
$('#container').highcharts(data);
},
error: function() {
alert("Something is not OK")
},
});
Though I can see the returned success alert(due to which I assume the Ajax call has returned required the data), the chart doesnot get populated. Not sure where I am going wrong. It would be great if somebody could point out the error.
Not sure how but changing the return method helped and also the some changes with the JSON format. Every (, ' "") matters. The corrected code is bleow:
#app.get('/getmyname/<jsonstring>')
def getmyname(db, jsonstring):
ret = """{
"chart": {
"type": "column"
},
"colors": [
"#00B7DE",
"#00539E"
],
"title": {
"text": "SALES - VOLUME"
},
"xAxis": {
"categories": ["Avg", "W", "W", "W", "W", "W", "W", "W", "W", "W", "W", "W", "W"],
"tickLength": 0
},
"yAxis": {
"gridLineWidth": 0,
"minorGridLineWidth": 0,
"min": 0,
"title": {
"text": "K EURO"
},
"labels": {
"enabled": false
},
"stackLabels": {
"enabled": true,
"style": {
"fontWeight": "bold",
"color": "gray"
}
}
},
"credits": {
"enabled": false
},
"legend": {
"align": "right",
"x": -30,
"verticalAlign": "top",
"y": 25,
"floating": true,
"backgroundColor": "white",
"borderColor": "#CCC",
"borderWidth": 1,
"shadow": true
},
"plotOptions": {
"column": {
"stacking": "normal",
"dataLabels": {
"enabled": true,
"color": "white",
"style": {
"textShadow": "0 0 3px black"
}
}
}
},
"series": [{
"name": "EST",
"data": [5, 3, 4, 7, 2, 4, 7, 3, 4, 1, 6, 2, 2]
}, {
"name": "VOD",
"data": [2, 2, 3, 2, 1, 3, 5, 3, 4, 7, 2, 4, 5]
}]
}"""
return json.loads(ret)
EDIT: I found this tool very helpful to debug JSON Format JSONFormtter