Wijmo UI for the Web
Change the LineChart Appearance
Wijmo User Guide > Widgets > Chart Widgets > LineChart > LineChart How To > Change the LineChart Appearance
Building on the Quick Start example, you can change the markers, the marker colors and gradients, and the rotation of the label text using the axisseriesList, and seriesStyles options.
  1. In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the axis label rotation and the marker type and uses the seriesStyles option to change the color of the markers and the color and width of the lines. 

    Drop down and copy script to paste in <head> section

                
    Script
    Copy Code
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijlinechart").wijlinechart({
                showChartLabels: false,
                hint: {
                    content: function () {
                        return this.y;
                    }
                },
                header: {
                    text: "World of Warcraft Players by Region"
                },
                axis: {
                    y: {labels: {style: {rotation: -45}}},
                    x: {labels: {style: {rotation: -45}}}
                },               
                seriesList: [
                    {
                        label: "North America",
                        legendEntry: true,
                        data: {
                            x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), 
                                new Date("12/1/2005"), new Date("3/1/2006"), new Date("12/1/2006"), 
                                new Date("1/1/2008")],
                            y: [1000000, 1000000, 1100000, 1400000, 1700000, 2000000, 2500000]
                        },
                        markers: {visible: true, type: "circle"}
                    },
                    {
                         label: "Europe",
                         legendEntry: true,
                         data: {
                             x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), 
                                 new Date("12/1/2005"), new Date("3/1/2006"), new Date("7/1/2006"), 
                                 new Date("12/1/2006"), new Date("1/1/2008")],
                             y: [1000000, 1000000, 900000, 1000000, 1000000, 1000000, 1500000, 2000000]
                         },
                         markers: {visible: true, type: "circle"}
                    },
                    {
                          label: "Asia",
                          legendEntry: true,
                          data: {
                              x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), 
                                  new Date("3/1/2006"), new Date("9/1/2006"), new Date("12/1/2006"), 
                                  new Date("1/1/2008")],
                              y: [1500000, 2000000, 2400000, 3700000, 4000000, 4500000, 5500000]
                          },
                          markers: {visible: true, type: "circle"}
                    }
                ],
                seriesStyles: [
                    {stroke: "#B70CF0", "stroke-width": 2, opacity: 1}, 
                    {stroke: "#0C85F0", "stroke-width": 2, opacity: 1}, 
                    {stroke: "#0C2AF0", "stroke-width": 2, opacity: 1}
                ]
            });
    
            var resizeTimer = null;
            $(window).resize(function () {
                window.clearTimeout(resizeTimer);
                resizeTimer = window.setTimeout(function () {
                    var jqLine = $("#wijlinechart"),
                    width = jqLine.width(),
                    height = jqLine.height();
                    if (!width || !height) {
                        window.clearTimeout(resizeTimer);
                        return;
                    }
                    jqLine.wijlinechart("redraw", width, height);
                }, 
                250);
            });
        })
     </script>
  2. No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
  3. Save your HTML file and open it in a browser. The chart appears like the one in the image below, with rotated axis labels, circle markers, and custom styled lines.
See Also

Widgets

Reference