score:13
Accepted answer
With Chart.js v2.1, you can write a plugin to do this
Preview
Script
Chart.pluginService.register({
afterDraw: function (chart, easing) {
if (chart.config.options && chart.config.options.scales) {
if (chart.config.options.scales.xAxes)
chart.config.options.scales.xAxes.forEach(function (xAxisConfig) {
if (!xAxisConfig.color)
return;
var ctx = chart.chart.ctx;
var chartArea = chart.chartArea;
var xAxis = chart.scales[xAxisConfig.id];
// just draw the scale again with different colors
var color = xAxisConfig.gridLines.color;
xAxisConfig.gridLines.color = xAxisConfig.color;
xAxis.draw(chartArea);
xAxisConfig.gridLines.color = color;
});
if (chart.config.options.scales.yAxes)
chart.config.options.scales.yAxes.forEach(function (yAxisConfig) {
if (!yAxisConfig.color)
return;
var ctx = chart.chart.ctx;
var chartArea = chart.chartArea;
var yAxis = chart.scales[yAxisConfig.id];
// here, since we also have the grid lines, set a clip area for the left of the y axis
ctx.save();
ctx.rect(0, 0, chartArea.left + yAxisConfig.gridLines.lineWidth - 1, chartArea.bottom + yAxisConfig.gridLines.lineWidth - 1);
ctx.clip();
var color = yAxisConfig.gridLines.color;
yAxisConfig.gridLines.color = yAxisConfig.color;
yAxis.draw(chartArea);
yAxisConfig.gridLines.color = color;
ctx.restore();
});
// we need to draw the tooltip so that it comes over the (redrawn) elements
chart.tooltip.transition(easing).draw();
}
}
});
and then
...
options: {
scales: {
xAxes: [{
color: 'blue',
...
}],
yAxes: [{
color: 'blue',
...
}]
}
...
Fiddle - http://jsfiddle.net/zfsc2wuc/
Source: stackoverflow.com
Related Query
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Style X and Y Axis (tick mark) with Chart.js?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- Chart.js bar chart with time on X axis and category on Y axis is not rendered
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Multiple axis line chart with Chart.js and JSON data from Google Sheet
- How to make chart which has both positive and negative value, starts with 0 - x axis
- In Chart.js set chart title, name of x axis and y axis?
- Charts.js Formatting Y Axis with both Currency and Thousands Separator
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Chart.js 2.0 Formatting Y Axis with Currency and Thousands Separator
- Chart.js Mixed Bar and Line chart with different scales
- Problem for display a chart with Chart.js and Angular
- Chart.js Dynamically Updating Chart with X Axis Time
- Obtain max value of y axis of line chart rendered with Chart.js
- Line chart with large number of labels on X axis
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Chart.js with dual axis on bar and line graph
- Can we draw a Line Chart with both solid and dotted line in it?
- Chart Js, Style some ticks on the axis differently
- Increase padding between legend and chart with react-chartjs-2
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- to increase space between x axis and first horizontal bar in chart js
- React chart : prevent chart's canvas scaling with height and width
- Why would a ChartJS chart end up with width 0 and height 0?
- Using chart js options with react-chartjs-2 and typescript
- Trying to load a chart with chart.js, through ajax and php
More Query from same tag
- Chart.js - How to offset bars from ZeroLine
- Chart.js not showing data until I click on the label 3 times
- Increase space between legend and chart
- Chartjs - pointColor to follow current color of gradient stroke
- Start bar-chart at 0 using ChartJS
- How do you set x and y axis and Title for a line chart using charts.js?
- How to add space between two scales in chart-js?
- chartjs - how do I add border radius on bottom corners
- Chart.js - Hide tooltip caret
- HTML Input Form to a Javascript Variable
- Old data flickering after hover on line graph Chart.js
- subcategories for each bar in multibar chart using chartjs
- how to set start value as "0" in chartjs?
- Cannot change the color of column chart according to its value
- How to properly unpack data from PHP array encoded as JSON from a JavaScript file
- chart.js 3 and time axis displays wrong date data
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- How to use canvasjs to draw column chart using text data
- TypeError: Cannot assign to read only property ... - Editing react-chartjs-2 datasets with Redux
- How to use custom rendering methods of chartJs through ng2-charts angular?
- chartjs: How to create single outer border for stacked barchart
- chartjs unlimited x axis labels
- jQuery convert hex to rgba
- Chart.js : Controller for Scatter chart doesn't work for draw function
- Rails 4.2 jQuery loads only after refresh
- Chart.js - IndexSizeError: Index or size is negative or greater than the allowed amount
- How does chart updating works within the context of react?
- Chart.js max legend height
- Transparentize some bars of dataset in ChartJS
- Converting JSON data into Chart.js array from strings