Over the last two weeks, we have created a simple pie chart and then added some functionality. This week we will focus on some design aspects to improve the presentation of the chart.

While contrasting colors for each slice of the pie can be used for a clear distinction between slices, using a border for each one generally looks nicer. This is easily accomplished using the .stroke method.

ctx.lineWidth = 1;

ctx.strokeStyle = "#fff";

ctx.stroke();

Another simple way to improve the appearance of the chart is to add some color gradient for each slice. Using color gradients will give the chart a more modern look and are extremely simple to add. The first step is to define the gradient as follows.

var gradient = ctx.createLinearGradient( 0, 0, canvas.width, canvas.height );

gradient.addColorStop( 0, "#ddd" );

gradient.addColorStop( 1, colors[i] );

Once the gradient is defined, we can set it as the fillStyle for the context and call the fill method.

ctx.fillStyle = gradient;

ctx.fill();

Last week we added rendering of the pie slice values at the bottom of the screen. While that does the job of giving the user information about the slice, it forces them to look away from the chart. To improve on that, we will have the value of the slice be rendered at the position of the mouse. The effect will be that the value follows the user as they hover over the slices.

ctx.fillStyle = '#fff';

ctx.font = 'bold 10px verdana';

ctx.fillText(pieData[slice]['value'], x, y, 20);

While adding these improvements may seem trivial, they are worth mentioning due to the fact that they transform what was a simple and dull chart into one that is more functional, intuitive, and professional.

For the full source and a working demo, please follow the link below.

http://yojimbocorp.com/demos/pieChart3.html