Использую этот плагин
http://www.chartjs.org/
Нужно добавить отсупы внутри осей, что бы график не был впритык к оси x-y.
Вот что у меня есть
Вот как должно
function initHistoryChart() {
var ctx = $("#historyChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
datasets: [{
label: 'product1',
yAxisID: 'place',
fill: false,
borderColor: "#f78a00",
pointBackgroundColor: "#f78a00",
pointHoverBorderColor: "#f78a00",
pointBorderWidth: 10,
pointRadius: 0,
pointHitRadius: 10,
borderWidth: 3,
lineTension: 0,
data: [3, 3, 4, 5, 4, 6, 5, 7, 5, 6, 3, 5]
},
{
label: 'product2',
yAxisID: 'customers',
fill: false,
borderColor: "#7cc182",
pointBackgroundColor: "#7cc182",
pointHoverBorderColor: "#7cc182",
borderWidth: 3,
pointBorderWidth: 10,
pointRadius: 0,
pointHitRadius: 10,
lineTension: 0,
borderCapStyle: "square",
borderDash: [10],
data: [10000, 21000, 19000, 35000, 32000, 45000, 42000, 38000, 24000, 23000, 18000, 15000]
},
{
label: 'product3',
yAxisID: 'place',
fill: false,
borderColor: "#fbdb00",
pointBackgroundColor: "#fbdb00",
pointHoverBorderColor: "#fbdb00",
borderWidth: 3,
pointBorderWidth: 10,
pointRadius: 0,
pointHitRadius: 10,
lineTension: 0,
borderCapStyle: "square",
borderDash: [10],
data: [5, 3, 4, 2, 10, 6, 4, 2, 3, 5, 7, 6]
}]
},
options: {
scaleShowVerticalLines: false,
tooltips: {
backgroundColor: "rgba(0,0,0,0)",
titleFontSize: 0,
bodyFontSize: 16,
bodyFontColor: "#8592a7",
bodyFontStyle: "bold",
titleMarginBottom: 0,
displayColors: false,
xPadding: 10,
callbacks: {
label: function (t, d) {
if (t.datasetIndex === 0) {
return "position: " + t.yLabel;
} else if (t.datasetIndex === 1) {
return "sales objective: " + t.yLabel;
} else if (t.datasetIndex === 2) {
return "ranking position objective: " + t.yLabel;
} else
return t.yLabel;
},
labelTextColor: function (t, c) {
if (t.datasetIndex === 0) {
return '#f78a00';
} else if (t.datasetIndex === 1) {
return '#7cc182';
} else if (t.datasetIndex === 2) {
return '#fbdb00';
} else
return '#8592a7';
}
}
},
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
fontColor: "#8592a7",
fontSize: 18,
fontFamily: "'dosis'"
},
gridLines: {
display: false,
color: "#8592a7",
lineWidth: 4
},
scaleLabel: {
display: true,
labelString: "month",
fontColor: "#8592a7",
fontSize: 20,
fontFamily: "'dosis'"
}
}],
yAxes: [{
id: "place",
position: "left",
stepSize: 50,
ticks: {
min: 1,
max: 20,
stepSize: 5,
reverse: true,
fontColor: "#8592a7",
fontSize: 18,
fontFamily: "'dosis'"
},
gridLines: {
display: false,
color: "#8592a7",
lineWidth: 4,
drawTicks: true,
tickMarkLength: 15
},
scaleLabel: {
display: true,
labelString: "#place",
fontColor: "#8592a7",
fontSize: 20,
fontFamily: "'dosis'"
},
}, {
id: "customers",
position: "right",
gridLines: {
display: false,
color: "#8592a7",
lineWidth: 4
},
ticks: {
fontColor: "#8592a7",
fontSize: 18,
fontFamily: "'dosis'",
min: 0,
max: 50000,
stepSize: 10000
},
scaleLabel: {
display: true,
labelString: "#customers",
fontColor: "#8592a7",
fontSize: 20,
fontFamily: "'dosis'"
}
}]
}
}
});
}