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
- How to show Y axis ticks for every point in the graph
- Create a pie chart with chartjs package in R
- Chart.js Chart displays but no data
- why is the background black when with Chartjs export to a image
- Chart.js not showing data until I click on the label 3 times
- Render chartjs and export image to data not in the DOM
- chart.js: set specific numbers in y-axis
- Multi Level Color in Doughnut Chart in ng2-charts
- How to fix a stacked logarithmic bar chart values to fit the grid
- Get X, Y onClick chart coordinates in ChartJS
- How to know which bar is clicked on chart.js bar chart with multiple data?
- Chart.js - Timeline
- How do you label points in a scatterChart built using ng2-chart
- Bootstrap modal not working with chartjs line graph
- Unable to resolve path to module 'chartjs-plugin-stacked100'
- Chart.js not appearing in tabs
- Chart.js - Formatting Y axis
- Creat Chart Bar using ChartJS
- Creating a stacked budget Vs Actual chart
- Print chart in Chrome build by Chart jS using javascript
- How to create dataset in chart.js dynamically using array?
- Handle X-axis label position in chart js
- Changing chart data dynamically with C# from SQL database
- Reloading ChartJs Image
- ChartJS horizontal label are 1-2px clipped
- How to use the useEffect function in react js chart 2 to change the labels?
- How to stack time charts vertically
- Is there any way to show a tooltip for points which are not visible on the chart in Chart.js?
- Chart js options not changing chart
- How to create single value Doughnut or Pie chart using Chart.js?