Пример файла с настройками диаграммы HighCharts

На странице приведен пример*. js файла с настройками диаграммы HighCharts

var options = {
    "chart": {//основные настройки диаграммы
        "backgroundColor": "rgba(255, 255, 255, 1.000000)",
        "borderColor": "rgba(128, 128, 128, 1.000000)",
        "borderRadius": 0,
        "borderWidth": 0.944882,
        "defaultSeriesType": "column",
        "plotBackgroundColor": "rgba(225, 225, 225, 1.000000)",
        "plotBorderColor": "rgba(128, 128, 128, 1.000000)",
        "plotBorderWidth": 1,
        "renderTo": "tdChart",
        "seriesOrder": "forward",
		animation: false
    },
    "legend": {//настройки легенды
    	"align": "center",
		"floating": false,
        "backgroundColor": "#ccffff",
        "borderColor": "#909090",
        "borderWidth": 1,
        "enabled": true,
        "itemStyle": {
            "color": "#000000",
            "fontFamily": "Arial",
            "fontSize": 9.44882,
            "fontStyle": "normal",
            "fontWeigth": "normal",
            "textDecoration": "none"
        },
        "layout": "horizontal",
        "verticalAlign": "bottom"
    },
    "plotOptions": {//настройки области построения диаграммы
        "series": {
            "connectNulls": true,
            "dataLabels": {
                "align": "center",
                "enabled": false,
                "formatter": "%y",
                "rotation": 0,
                "style": {
                    "color": "#000000",
                    "fontFamily": "Arial",
                    "fontSize": 9.44882,
                    "fontStyle": "normal",
                    "fontWeigth": "normal",
                    "textDecoration": "none"
                }
            },
            "marker": {
                "enabled": false
            },
            "stacking": null
        }
    },
    "series": [//ряды данных
    {
        "borderColor": "rgba(20, 27, 36, 0.501961)",
        "borderPenEnabled": true,
        "borderWidth": 0.377953,
        "brushEnabled": true,
        "dashStyle": "solid",
        "data": [1000, 2000, 4000, 8000, 16000, 32000, 64000],
        "dataIndex": 0,
        "dataLabels": {
            "align": "center",
            "enabled": false,
            "formatter": "%y",
            "rotation": 0,
            "style": {
                "color": "#000000",
                "fontFamily": "Arial",
                "fontSize": 9.44882,
                "fontStyle": "normal",
                "fontWeigth": "normal",
                "textDecoration": "none"
            }
        },
        "legendIndex": 1,
        "lineColor": "rgba(81, 111, 147, 1.000000)",
        "linePenEnabled": true,
        "lineWidth": 1.51181,
        "marker": {
            "enabled": true,
            "fillColor": null,
            "lineColor": "#909090",
            "lineWidth": 0,
            "radius": 5.66929,
            "symbol": "circle"
           },
        "name": "World",
        "shadow": false,
        "showInLegend": true,
        "zIndex": 1
       }, {
       	"borderColor": "rgba(20, 27, 36, 0.501961)",
       	"borderPenEnabled": true,
       	"borderWidth": 0.377953,
       	"brushEnabled": true,
       	"dashStyle": "solid",
       	"data": [64000, 32000, 16000, 8000, 4000, 2000, 1000],
       	"dataIndex": 0,
       	"dataLabels": {
       		"align": "center",
       		"enabled": false,
       		"formatter": "%y",
       		"rotation": 0,
       		"style": {
       			"color": "#000000",
       			"fontFamily": "Arial",
       			"fontSize": 9.44882,
       			"fontStyle": "normal",
       			"fontWeigth": "normal",
       			"textDecoration": "none"
       		}
       	},
		trendLines: [],
       	"legendIndex": 1,
       	"lineColor": "rgba(81, 111, 147, 1.000000)",
       	"linePenEnabled": true,
       	"lineWidth": 1.51181,
       	"name": "Universe",
       	"shadow": false,
       	"showInLegend": true,
       	"zIndex": 1
       }],
    "title": {//заголовок
        "style": {
            "backgroundColor": "#ffffff",
            "borderColor": "#909090",
            "borderStyle": "solid",
            "borderWidth": 0,
            "color": "#000000",
            "fontFamily": "Arial",
            "fontSize": 18.6667,
            "fontStyle": "normal",
            "fontWeigth": "normal",
            "textDecoration": "none"
        },
        "text": ""
    },
    "tooltip": {//всплывающая подсказка
        "enabled": true
    },
    "xAxis": {//ось X
        "categories": ["2003", "2004", "2005", "2006", "2007", "2008", "2009"],
        "gridLineColor": "rgba(128, 128, 128, 1.000000)",
        "gridLineDashStyle": "dot",
        "gridLineWidth": 1.33333,
        "labels": {
            "align": "center",
            "enabled": true,
            "rotation": 0,
            "spacing": true,
            "style": {
                "color": "#000000",
                "fontFamily": "Arial",
                "fontSize": 9.44882,
                "fontStyle": "normal",
                "fontWeigth": "normal",
                "textDecoration": "none"
            }
        },
        "lineColor": "rgba(128, 128, 128, 1.000000)",
        "lineWidth": 0.377953,
        "tickColor": "rgba(128, 128, 128, 1.000000)",
        "tickWidth": 0.377953,
        "tickmarkPlacement": "on",
        "title": {
            "style": {
                "backgroundColor": "#ffffff",
                "borderColor": "#909090",
                "borderStyle": "solid",
                "borderWidth": 0,
                "color": "#000000",
                "fontFamily": "Arial",
                "fontSize": 13.2283,
                "fontStyle": "normal",
                "fontWeigth": "bold",
                "textDecoration": "none"
            },
            "text": ""
        }
    },
    "yAxis": {//ось Y
        "gridLineColor": "rgba(128, 128, 128, 1.000000)",
        "gridLineDashStyle": "solid",
        "gridLineWidth": 0.944882,
        "labels": {
            "align": "right",
            "dataFormat": "# ##0,00",
            "enabled": true,
            "rotation": 0,
            "spacing": true,
            "style": {
                "color": "#000000",
                "fontFamily": "Arial",
                "fontSize": 9.33333,
                "fontStyle": "normal",
                "fontWeigth": "normal",
                "textDecoration": "none"
            }
        },
        "lineColor": "rgba(128, 128, 128, 1.000000)",
        "lineWidth": 0.377953,
        "max": null,
        "min": null,
        "tickColor": "rgba(0, 0, 0, 1.000000)",
        "tickInterval": null,
        "tickWidth": 0,
        "title": {
            "style": {
                "backgroundColor": "#ffffff",
                "borderColor": "#909090",
                "borderStyle": "solid",
                "borderWidth": 0,
                "color": "#000000",
                "fontFamily": "Arial",
                "fontSize": 13.2283,
                "fontStyle": "normal",
                "fontWeigth": "bold",
                "textDecoration": "none"
            },
            "text": ""
        },
        "type": "linear"
    }
};

Диаграмма с вышеприведенными настройками имеет следующий вид:

См. также:

Размещение диаграммы HighCharts на html-странице | Пример использования ChartMaster для настройки диаграммы HighChart